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
Download
FlexFileUploadComponent.zip (version 0.1.4)
browse the source code and contents of FlexFileUploadComponent.zip

62 Comments
Very awesome!
Where does one define a specific folder within the default directory that uploaded files are placed?
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);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?
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.
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.
Isn’t it possible to upload really large files ( > 100.00 mb)? If yes how could you do this?
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?
Wow, this looks quite handy!
For a nice and easy Web-ftp solution, check my FileManager FX.
You have to compile the component for Flash Player 10 (with Flex SDK 3.x).
FileReference.loadis only available since FP 10.For more information see:
http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10
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?
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?
The php code is already available. The files are inside the
bin-debugdirectory of the zip file.See: http://www.zehnet.de/files/FlexFileUploadComponent/$zip_FlexFileUploadComponent/bin-debug
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?
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!
@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
urlVariablesor to use the customBigFileUploadclass for all of your uploads.nik
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.
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.
You have to pass an
uploadUrlvia flashvars to the swf object as it otherwise does not know where to upload the files.Excellent work. can you let us know how to upload more then 100MB files.
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.
Hello,
I forgot one thing, I need to update my database with all files uploading, where should i include that code ?
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?
How to update my database with all files?
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
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();
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
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.
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
I think it the flashvars that is not set correctly (that is the line I added
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 ?
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.
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.
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
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
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).
Hi, Awesome componenet. But I am a java devloper and want to use this component with checksum functionality… plaese can anyone help me!!!
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?
The “no request” text above was in an “error” tag with an “id” attribute of 400.
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
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
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
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
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…
Can any body tell me from where i able to know that overall upload operation is completed (It may be 1 or multiple file).
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
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?
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!
Could you share this ported version ?
@Joan Llenas
Could you share this ported version ?
Hi,
Hey anybody know how to get total number of files to be load and total number of files successfully loaded in php file ????
JYOTI
R u using this plug-ins, if so then I can help u
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
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
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!
Thank you.
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
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!
Raziel is right =( It’s stopped working.
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
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?
I want to edit the swf file.Can you send the all suorce files to me by email??Thank you very much