Flex FileUpload Component

What we’ve got here is a FileUpload component for Flex which utilizes the new FileReference.load method available since Flash Player 10 to support uploading of large files.
As a lot of providers choose a very small size for their PHP ini settings of upload_max_filesize and post_max_size, uploading files bigger than 2mb is often not supported. This can be very annoying if you like to upload mp3 or video files, which easily can exceed the maximum accepted file size. In this case you normally have to go with an FTP client.

Uploading large files

If supported by the client’s Flash Player this upload component utilizes the new FileReference.load method to load the file into the ram of the client computer at first. Once loaded the file data can be read via the data property of the FileReference object. It is now possible to extract chunks of the loaded file data and upload those chunks to the server separately. This way the upload-data won’t exceed the maximum accepted post data of the server as the chunks used are a lot smaller. On the server side, a php script is joining the chunks together to the original file.

Resuming Uploads

Prior to uploading the uploader also calculates an adler32 checksum of the file data. This checksum is used to check if a partially uploaded file already exists on the server and an upload operation can be resumed.

Screenshots

Since i don’t want unkown people to upload random files to my server, i can only offer some screenshots of the application here. The best thing would be, if you grab the source code which is available at the bottom of this page and test it out yourself.


selected files for upload


file already exists dialog


loading file into ram to for chunkwise upload


calculating an adler32 checksum of the file data to support the resume of uploads


uploading the file in chunks

License

CC-GNU LGPL
Creative Commons GNU LGPL 2.1

Download

FlexFileUploadComponent.zip (version 0.1.4)
browse the source code and contents of FlexFileUploadComponent.zip

This entry was posted on Monday, February 23rd, 2009 at 18:58. It is filed under flash, flex, php and tagged with , , , , , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

26 Comments

001
Chris - April 1st, 2009 at 10:04 pm

Very awesome!

002
Bhomatude - April 3rd, 2009 at 10:29 pm

Where does one define a specific folder within the default directory that uploaded files are placed?

003
nik - April 5th, 2009 at 4:58 pm

The destination directory can be any existing directory on your server and is set inside the upload.php file:
$upload = new FileUpload(DESTINATION_DIR);
or you can write:
$upload->set_target_directory(DESTINATION_DIR);

004
Franz Korbjuhn - April 15th, 2009 at 9:56 am

Hi, i am not able to specify a new folder for the uploaded files. At my webhoster i am using this folder: ‘/var/www/html/web256/html/bht’ . The files should be uploaded into ‘/var/www/html/web256/html/bht/uploads’. How can i realize it?

005
Tomasz Ulrych - May 11th, 2009 at 11:48 am

This is really brilliant piece of code! It solves all the problems with uploading files on a shared hosting. Very neat and elegant code, easy to customize and it works! Thank you.

006
Chris - May 19th, 2009 at 6:04 am

Any reason why the file uploaded to the server would continue to have the .tmp extension? I don’t see any errors in the log files.

007
J. - May 27th, 2009 at 4:00 pm

Isn’t it possible to upload really large files ( > 100.00 mb)? If yes how could you do this?

008
Bob - June 8th, 2009 at 11:01 pm

I would love to use it but it does not work with over 30 errrors being generated in the BigFileUpload. What version of Flex is required?

009
Fidel Gonzo - June 17th, 2009 at 6:48 pm

Wow, this looks quite handy!
For a nice and easy Web-ftp solution, check my FileManager FX.

010
nik - June 18th, 2009 at 1:01 pm

You have to compile the component for Flash Player 10 (with Flex SDK 3.x).
FileReference.load is only available since FP 10.
For more information see:
http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10

011
Gilbert - July 3rd, 2009 at 1:32 am

Can you use this code to load a video to the client flex app.?

Can you play the video without uploading it to the server?

012
RK - August 27th, 2009 at 8:13 am

This is awesome!!! I appreciate if you also post the upload.php code or server side script sample that can verify the checksum and allow resumption of the interrupted upload?

013
nik - August 27th, 2009 at 1:14 pm

The php code is already available. The files are inside the bin-debug directory of the zip file.
See: http://www.zehnet.de/files/FlexFileUploadComponent/$zip_FlexFileUploadComponent/bin-debug

014
RK - August 27th, 2009 at 11:50 pm

Cool, thanks Nik! This really helps! What would you reccomend for enabling pause/resumption on big file download? Is there any sample code similar to upload exist for managing the download?

015
Steve - December 1st, 2009 at 4:14 pm

BUG!
Thanks for the awesome component. There is a bug you may not be aware of. When you upload a file smaller than the chunk size the session variable is changed. All other actions (such as file check and split upload) send the correct session var. This casuses an issue with server side authentication of log in.

Thanks again. It got me out of a hole!

016
nik - December 5th, 2009 at 10:36 am

@Steve:

If you upload files smaller than the chunk size, the “ordinary” actionscript upload is used via FileReference.upload. This method is buggy as it does not send cookie data with the request. If your session depends on a sessionId set in a cookie, the request won’t be authenticated. And you can not even change this behavior by directly digging into the request headers and adding the cookie data manually.

The manual says:
The requestHeaders property of the URLRequest object is ignored; custom HTTP request headers are not supported in uploads or downloads.

The only solution to bypass this problem is to either send your sessionID as GET parameter via urlVariables or to use the custom BigFileUpload class for all of your uploads.

nik

017
Mark - December 6th, 2009 at 7:11 pm

It looks great but I have no idea how it works. I keep getting “No ploadUrl specified” and I can’t figure out how to resolve it.

018
Pramod - December 14th, 2009 at 1:30 pm

It looks great but I have no idea how it works. I keep getting “No ploadUrl specified” and I can’t figure out how to resolve it.

019
nik - January 31st, 2010 at 1:49 am

You have to pass an uploadUrl via flashvars to the swf object as it otherwise does not know where to upload the files.

020
vinnline - February 1st, 2010 at 10:45 am

Excellent work. can you let us know how to upload more then 100MB files.

021
Shafi Saidu - February 13th, 2010 at 6:17 pm

Very nice app. I was trying to integrate this with my website. The file upload folder path is dynamic in my project. But I am facing problem the app is uploading files to folder which is initially assigned even after i change folder path using session variable in PHP.

022
Shafi Saidu - February 13th, 2010 at 7:14 pm

Hello,
I forgot one thing, I need to update my database with all files uploading, where should i include that code ?

023
Tom - February 18th, 2010 at 4:11 pm

Great application. It works with files greater than officialy supported 100MB. However there is a problem with files greater than the amount of RAM available. In such case there should be MemoryError thrown and caught (as I see it in BigFileUpload code). But it crashes Flash Player instead. Why is that? Am I missing something?

024
Takagi tankless water heater - February 25th, 2010 at 12:47 pm

How to update my database with all files?

025
Steve - March 8th, 2010 at 11:24 am

Hi Nik.

I have found a bug? I have set the max upload file size to 600MB. When I upload 3 files on FF with their sizes adding up to just over 600MB the upload fails on the last file with the % progress saying “uploading file…NaN%”. Subsequent file uploads fail – even if the page is refreshed. Closing FF is the only way to get files uploading again. I suspect it isn’t clearing the size uploading between files – but I don’t programme flex, thus cannot fix.(Sorry)

My client is willing to pay for your time to fix – just let me know the estimated cost.

Thanks for the excellent component.

Steve

026
Boby - March 10th, 2010 at 6:23 pm

Found an issue, getting urlVariables parameter not working

in file FileUploaderStandalone.mxml,
line 60
var c:XMLList=data.children(), n:int=c.length;;
need to be changed to
var c:XMLList=data.children(), n:int=c.length();

 
Name:
Mail:
Website:
Comment:
Validation: validation