Flex Pasta » Uploading Files with Firefox Solution
Uploading Files with Firefox Solution
A hand full of bugs have been field with Adobe’s Flash Player regarding problems uploading with Firefox.
https://bugs.adobe.com/jira/browse/FP-78
https://bugs.adobe.com/jira/browse/FP-1044
https://bugs.adobe.com/jira/browse/FP-419
https://bugs.adobe.com/jira/browse/FP-201
https://bugs.adobe.com/jira/browse/FP-568
There have also been plenty of posts describing the problem.
http://sethonflex.blogspot.com/2007/10/flex-and-filereferenceupload-using.html
http://thanksmister.com/index.php/archive/firefox-flex-urlrequest-and-sessions-issue/
http://stackoverflow.com/questions/351258/how-do-i-make-flex-file-upload-work-on-firefox-and-safari
In Flash 9, there is really no good way around this problem. However, in Flash 10 / Flex 4, an enhancement to flash.net.FileReference makes it possible to read the contents of a file before it is uploaded. Meaning that the file can be uploaded in different ways then can be done in Flash 9. The following example shows how easy file uploading can be and is not tied to SSL, Firefox, IE, Chrome, etc. This method is using Java server side with BlazeDS, but could be modified to work with other setups.
First, look at the application file.
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Applicationxmlns:fx=”http://ns.adobe.com/mxml/2009“ xmlns:s=”library://ns.adobe.com/flex/spark“ xmlns:mx=”library://ns.adobe.com/flex/halo” minWidth=”1024” minHeight=”768“>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!–
Place non-visual elements (e.g., services, value objects) here –>
<s:RemoteObject id=”upload” destination=”uploadService” endpoint=”http://localhost/Context/messagebroker/amf“/>
</fx:Declarations>
<fx:Script>
<![CDATA[
private var fr:FileReference = new FileReference();
private function test():void
{
fr.browse();
fr.addEventListener(Event.SELECT, selected);
fr.addEventListener(Event.COMPLETE, complete)
}
private function selected(event:Event):void
{
fr.load();
}
private function complete(event:Event):void
{
var byteArray:ByteArray = fr.data;
upload.uploadFile(byteArray);
}
]]>
</fx:Script>
<s:Button label=”Upload” click=”test()”/>
</s:Application>
Notice the fr.load(); This will actually load the file and make it’s contents available to us in the code. The complete handler than takes those contents as a byte array and calls the remote “uploadService” passing in that byte array. Here is the simple Java code for the service method “uploadFile”:
public void uploadFile(byte[] file)
{
// Do something here to save the file
}
It is that easy in Flash 10. By allowing access to the file, the upload process is quick and painless.
10 Comments
1. Aran replies at 23rd February 2010, 7:17 pm :
We implemented an AMF based file uploader (using Blaze DS) on a recent large project, but we actually rolled back after some internal testing to a multi-part form based uploader because of a few issues:
- limited size you can send over bytearry (depending on your buffer size on your server, your call will fail if it is too large). We seemed to hit a maximum of ~8mb regardless of what values we set on the server before the call would just take forever and eventually fail (even on local based server)
The theoretical limit of an AMF based byteArray is 256Mb ( http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf ), but we found this number to be much lower as stated.
- random failures (sometimes the calls would just fail for no reason - nothing in the server logs helped us track this down)
- no progress is available when sending over AMF
We actually ended up using the MultipartURLLoader class ( http://code.google.com/p/in-spirit/wiki/MultipartURLLoader ) in combination of Filereference.load(), which uses a custom URLLoader class to send multipart form data (which can include variables, and multiple files etc) rather than FileReference directly. We used the Jakarta Commons FileUpload class on the Java side without any modifications.
It has been working great, and I recommend it to anyone wanting to do file uploading through Flash.
2. Shih-gian Lee replies at 27th February 2010, 10:02 am :
Talking about browser compatibility. I can easily do this in a couple lines of Ruby on Rails code using a gem.
Instead of browser incompatibility that Adobe claimed to be a big problem, they are buried by their own runtime incompatibilities. It is the same pain that Applet or Swing app. experienced previously.
Adobe will be surprised that browser compatibility is not such a big issue as before. Looking forward to HTML5.
3. Andrey replies at 3rd March 2010, 7:14 am :
As I know each bytearray upload operation needs user interaction. Am I right?
4. Brian Telintelo replies at 3rd March 2010, 8:24 am :
No. If you notice in the example it is using a byte array with BlazeDS. The only user action is to click a button and select a file to upload. The file contents(ByteArray) are then sent to Java via AMF.
5. Andrey replies at 3rd March 2010, 9:57 am :
I’m just using URLLoader to upload file ByteArray as String because
“In Flash Player 10 and later, if you use a multipart Content-Type (for example “multipart/form-data”), the POST operation is subject to the security rules applied to uploads…”
6. Tramaine replies at 4th March 2010, 9:41 am :
Does this mean that the files contents gets loaded into the browser’s memory? How will this effect performance when uploading large files or uploading files multiple files?
7. Loading Files Into Flex A&hellip replies at 3rd April 2010, 3:11 pm :
[…] user for upload without having to send it off to a server and get it back again. I stumbled across this while poking around for resources on the nitty gritty details of the Spark architecture–it wasn’t […]
8. Nathan replies at 12th May 2010, 9:44 am :
While I call FilReference.load(), I’m getting exception from Firefox. I also written some handler, but it is not handling properly.
However IE is working good.
Please suggest some solution.
Thanks in advance.
9. Nathan replies at 12th May 2010, 10:03 am :
How to parse this file on Java Server Side?
Please suggest some solution..
10. hsTed replies at 22nd August 2010, 2:31 pm :
your post helped me to get started finding a solution to this very problem. thanks!
Leave a comment