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.

72 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();

027
Ionut - May 21st, 2010 at 10:01 am

wow exactly what i was searching for with only one problem
can your code be used in flash (cs3, 4 or 5)?
can u post a little example(as3 call of the class only no need for interface etc) if is possible

Thanks

028
Prasanna - June 4th, 2010 at 10:29 am

I am new to flex.I have a requirement that is to upload photos of filesize up to 10MB. I tried using this sample.But got stuck with PHP. It returns error ID ‘0′.

$working_dir = dirname(__FILE__);
define(’UPLOAD_MAX_SIZE’, 80 * 1024 * 1024); //20MB
define(’DESTINATION_DIR’, $working_dir);

What should be the working directory if my i have the project in the following folder.
c:\prasanna\wamp\www\FileUploaderApp.
Help me

Thanks.

029
Guss - July 7th, 2010 at 12:07 pm

Hi,

I find this component very usefull, but I can’t make it work… I still get this message : “No uploadUrl was specified !”

I added this line in the FileUploaderStandalone.html : , but it still doesn’t work !

Please help me.

Thanks

030
Guss - July 7th, 2010 at 12:09 pm

I think it the flashvars that is not set correctly (that is the line I added ;)

031
Guss - July 13th, 2010 at 12:56 pm

Hi,
- I set the -use-network=false in the project
- I run the FileUploaderApp.html

But I always get the error(0); in the flex interface when I try to upload a file.

What am I doing wrong ?

032
Guss - July 21st, 2010 at 9:39 am

Hi,

I finally found the solution to my problem. That was just a wrong path to the upload files in the upload.php :
$working_dir = dirname(__FILE__);
$working_upload = dirname(__FILE__.’/uploads’);

But I still had some problems loading big video files. I always had an offset set to 0, so the file kept loading the first chunk again and again !
So I checked on the server side, and I found out that I had a checksum negative after the dechex() function.

I added this line :
$checksum = str_replace(’ffffffff’, ”, $checksum);

And now everything works fine for me.

033
Sandrita - September 6th, 2010 at 2:35 pm

hello,
your code and works very well but I want to ask as I open the file I uploaded the file and also if you only have an option to save with the name there is any option to save with a code or key.
Thank you.

034
sai - October 8th, 2010 at 10:38 am

Hi,
Great component. We require the same for our project, but the project is on flex and java. Can you please let us know how to join the chunks together to the original file using a servlet/JSP.

Thank You

035
Javier - October 13th, 2010 at 3:40 pm

Great application! I test a dozen or more apps to avoid php max post limitation and this is the only worked for me. I’m using this app in an academic site where teachers upload files to students. What I need is a way to trigger an event when all files uploaded succesfully because I list the files uploaded in the same page of the app. There is a simple javascript interface to this app? Thanks and sorry for my poor english.
Javier

036
Javier - October 16th, 2010 at 2:55 am

Me again. Upload in chunks is not working. My site is in 000webhosting and they limit upload to 2MB, so I set maxPostSize to 524288 (512KB), 1048576 (1M) and 2097152 (2M) but still don’t work (a tmp file is created and app freezes when filesize is exactly 2M).

037
Rashmi - October 29th, 2010 at 6:18 pm

Hi, Awesome componenet. But I am a java devloper and want to use this component with checksum functionality… plaese can anyone help me!!!

038
Narcis - November 17th, 2010 at 8:12 pm

Will this component work with Python and Apache CGIs? This test file on the server (upload.py):
print ‘Content-type: text/xml\n\n’
print ‘no request\n’

showed Error(0): in the component. Any suggestion?

039
Narcis - November 17th, 2010 at 8:14 pm

The “no request” text above was in an “error” tag with an “id” attribute of 400.

040
Oded - November 19th, 2010 at 5:22 am

Cann’t get it working. Stuck with an Error(0).
I am testing it against my goDaddy account.
2 of the php scripts are in my webroot and I’ve modified the destination directory to be under “uploads” folder.
I’ve also set “overwriteIfExists” defaults to be true .
Help

041
Anirudha Biswas - December 31st, 2010 at 3:21 pm

It is really a nice tool. I am going to use this plug-in in my PACS Project (Open Source). But I am facing some problem. Please help with all details. Problems are given below:
1/ How can I increase upload file size 100 MB (I already configured my Apache Server with to upload more than 100MB).
2/ How can I manage the upload directory?
3/ How can I rename the upload file name as my wish?

I really looking for your help. Please reply as soon as possible.

Thanks and Regards
Anirudha

042
Rajiv - January 7th, 2011 at 11:10 am

This is a fantastic tool for bulk upload.
I can upload files and save all file details in database.
even mail can be generated for each file upload with it’s parameter.
thank you again by- phpsrajiv-at-gmail-dot-com

043
Rajiv singh - January 7th, 2011 at 11:29 am

Hi,
I am a PHP developer at Delhi India.
I have used this component in a medical transcription website to upload audio files in a bulk scale (200 files at a time) and it is working good.

I am able to save file details like file name , size, upload time etc in MySql database, as well as I can generate email against each file upload with it’s details to the uploader and the site admin.

Thank you very much to the zehnet team who brought it.
you can reach me at asprajiv at gmail dot com

044
Anirudha Biswas - January 11th, 2011 at 6:31 am

Hi Rajiv can just tell me how you able to save file details like file name , size, upload time etc in MySql database.
plz help me…

045
Anirudha Biswas - January 13th, 2011 at 9:13 am

Can any body tell me from where i able to know that overall upload operation is completed (It may be 1 or multiple file).

046
Anirudha Biswas - January 19th, 2011 at 6:51 am

This is a fantastic tool for bulk upload with Pause and Resume Option and able to handle file upto 2GB.
For Any kind of Problem Contact me @ my mail
anirudha_3500@yahoo.co.in

047
Rafa - February 8th, 2011 at 8:02 pm

Hi everyone,
What if I want it to upload the files to an existing FTP? Where would I edit so that I can use the “ftp://user:password@ftpserver/url-path” format?

048
Joan Llenas - February 10th, 2011 at 12:40 am

Hi Nicolas,
nice code base. I just ported it to Flex4 for a project I’m on and it’s been so easy.

Thank you for sharing!

049
Joan Llenas - March 14th, 2011 at 7:40 pm

Could you share this ported version ?

050
Adam - March 14th, 2011 at 7:41 pm

@Joan Llenas
Could you share this ported version ?

051
JYOTI - March 29th, 2011 at 9:59 am

Hi,
Hey anybody know how to get total number of files to be load and total number of files successfully loaded in php file ????

052
Anirudha Biswsa - April 5th, 2011 at 9:31 am

JYOTI

R u using this plug-ins, if so then I can help u

053
Hristo Mitev - April 27th, 2011 at 3:22 pm

Hi,
I have a problem with this script.
I compile it with FLEX SDK 4.1.
Script starts normaly but when i try to upload file (uploadUrl : ‘http://192.168.0.2/js/bin-debug/upload.php’, for example) the script returns me 0 end message at the bottom of file name “Error (0):”
Please help me :(

Thank You

054
Varrogy - June 5th, 2011 at 9:06 pm

Hi Hristo Mitev, this is probably because the register_globals are off on your php server. Try to insert this four lines to your upload.php before the
include($working_dir . ‘/class.FileUpload.php’); row. It would make the script compatible with your server settings.

if (!isset($_GET['fileChecksum']))
$_GET['fileChecksum'] = -1;

if (!isset($_FILES['Filedata']))
$_FILES['Filedata'] = 0;

b.regards
Gyuri

055
Cloude - July 16th, 2011 at 2:35 pm

Hi! this script is perfect!

But how can I upload file >100mb?

I have modified in ‘class.FileUpload.php’ this row but don’t working :(

if(!defined(’UPLOAD_MAX_SIZE’)) define(’UPLOAD_MAX_SIZE’,40000000); // 100mb

Thanks for help me!

056
Itiom - September 4th, 2011 at 5:35 pm

Thank you.

057
Manjurhusen - September 27th, 2011 at 4:36 pm

Hello
Thanks to make this application. Now i need some help.
I want to upload 1 GB file using this application. Can any one say me that where i have to do changes and how can get solution?

Thanks again. Please reply me ASAP

058
Raziel - October 18th, 2011 at 10:49 am

Hello,
Since Adobe has released Version 11 of Flash, this awsome tool has problems with the post maximum size! in my opinion it’s not spliiting the files into the right size! Please fix this problem!

Thanks!

059
Reso - October 18th, 2011 at 12:45 pm

Raziel is right =( It’s stopped working.

060
Reso - October 18th, 2011 at 1:21 pm

My colleague discovered that it appears in the BigFileUpload class. It’s the bigFileSupported function, it seems it is detecting the version numbers incorrectly?

We commented out everything inside the function and returned true. it seems to be working for us now

public static function get bigFileIsSupported():Boolean
{
return true;
}

This is a temporary fix of course

061
Shanaka Fernando - November 21st, 2011 at 8:35 am

I tried to upload a 1GB file. But it gives me the validation error of 100 GB. If I need to use chunk file functionality and upload larger file what should I do?

062
Carl - February 3rd, 2012 at 4:35 am

I want to edit the swf file.Can you send the all suorce files to me by email??Thank you very much

063
cheol jai Lee - March 6th, 2012 at 6:34 am

able 1G~10G file?
I think local computer drop down.
Use FileStream.openAsync ~!!!

private function onSocketConnect( evt:Event ):void {

DIDUtil.log( ‘[onSocketConnect]‘ );

byteArr = new ByteArray();
fileStream = new FileStream();

fileStream.addEventListener(ProgressEvent.PROGRESS, onProgressHandler);
fileStream.addEventListener(OutputProgressEvent.OUTPUT_PROGRESS, onErrorEventHandler);
fileStream.addEventListener(Event.CLOSE, onErrorEventHandler);
fileStream.addEventListener(IOErrorEvent.IO_ERROR, onErrorEventHandler);
fileStream.openAsync( file, FileMode.READ );

// ProgressEvent.PROGRESS 이벤트가 발생하고 처음으로 8K만 읽어오게 하기 위해
// 이 조작으로 FileStream은 8K bytes을 load 한다.
// 전송할 전체 사이즈을 알기 위해 다음 조작을 한다.
fileStream.readAhead = 1;
}

private function onProgressHandler( event:ProgressEvent ):void {

DIDUtil.log( “### [onProgressHandler]” );

// 파일 전체 사이즈 저장
bytesTotal = event.bytesTotal;
bytesTotalTransfer = event.bytesTotal;
chunkSize = DIDUtil.decideSegmentSizeFrom( bytesTotal );
fileStream.readAhead = chunkSize;

if( fileStream.bytesAvailable >= chunkSize || fileStream.bytesAvailable >= bytesTotal ) {

// remove event
fileStream.removeEventListener(ProgressEvent.PROGRESS, onProgressHandler);

DIDUtil.log( “fileStream.bytesAvailable = ” + fileStream.bytesAvailable);
DIDUtil.log(”event.bytesLoaded = ” + event.bytesLoaded);
DIDUtil.log( “chunkSize = “+ chunkSize );
DIDUtil.log(”event.bytesTotal = ” + event.bytesTotal);

nSegmentCnt = 0;
nSegmentTotalCnt = DIDUtil.getTotalSigment( bytesTotal, chunkSize );

startFileTransfer();

}
}

064
maklei - March 27th, 2012 at 5:06 pm

Hi,
I want to change upload.php with other asp.net uploader .

Any one have a solution for this?

Thank you very much in advance.

065
Angus Henderson - August 7th, 2012 at 8:32 pm

This is working well on flex 4.6.0 with two tiny changes (mx button color & stageChanged() rename )

I modified it into an auto-uploader in Air that monitors a folder every 5 sec.

The only problem I have is that if I start adding and removing large files to the upload folder, statsChanged can access a partially copied file and fail without any error handling.

066
Nicky - September 13th, 2012 at 11:17 pm

Hi All,
Can any one send me , working code , or can any one suggest me how can i upload files to my ftp server using flex3 code,

when i import this project i got error in net:FileReference

,undefined method load through a reference with static type flash.net:FileReference.

Please reply me at
gourav.flex@gmail.com

067
ajay - October 12th, 2012 at 2:34 pm

Can you please let me know if this works on firefox with an https connection. Can you please suggest ways to achieve this?

068
Vasilij - November 30th, 2012 at 11:42 am

Error in “Adler32.as”
Look into code:
var n:uint !!!
while (–n >= 0)
“N” will never become smaller than 0!!!
Look to the java implementation. There used INT instead of UINT!

069
Onyx - August 7th, 2013 at 2:15 pm

Is this thread still active? Need some help please

070
Felipe - September 25th, 2013 at 1:09 am

how to solve this problem? SecurityError: Error #2176: Certain actions, such as those that display a pop-up window, may only be invoked upon user interaction, for example by a mouse click or button press.

071
Felipe - September 25th, 2013 at 1:09 am

how to solve this problem? SecurityError: Error #2176: Certain actions, such as those that display a pop-up window, may only be invoked upon user interaction, for example by a mouse click or button press.

Have i change the logical?

072
nitsmi - October 7th, 2013 at 8:08 am

add variable?

upload.php?gcode=1234?

var flashvars = { uploadUrl : ‘./upload.php’, maxFileSize : (100 * 1024 * 1024), /*100mb*/ maxPostSize : (10 * 1024 * 1024)}; /*10mb*/
swfobject.embedSWF(”./swf/FileUploaderStandalone.swf”, “uploader”, “500″, “350″, “10.0.0″, “”, flashvars);

 
Name:
Mail:
Website:
Comment:
Validation: validation