Friday, July 21st, 2006

Ajax File uploads to Amazon S3

Category: Articles, Dojo, Ruby

<p>Raphael Bauduin has written about his experience converting a Rails remote form into a dojo.io.bind call that enables him to upload a file:

File uploads are finally deployed! You can now specify in MyOwnDB that a detail of your entity is of the type “file”. This will let you attach a file to an entry, and subsequently replace or delete it. This required some changes in the application, more specifically in the way the forms are submitted back to the server.

For a file upload to work fine, you have to send it with the enctype attribute set to “multipart/form-data”. But that’s not all! You cannot just serialize the form in javascript like you can do with other input types because you cannot access the file from Javascript. The reason for this is security.

Luckily, the Dojo javascript toolkit has a workaround that works amazingly well, and is really easy to put in place. Dojo is facilitating all XMLHttprequest thanks to its dojo.io.bind method, which I discovered thanks to an article correctly title “Introduction to dojo.io.bind“. This article shows that dojo.io.bind can be used to send simple GET or POST request, but also to submit forms. At first, I thought it didn’t support file uploads (as stated in the document), but it does amazingly well. And, best of all, it is cross browser.

How does it work?

Dojo transparently creates an IFRAME, and submits the form through that IFRAME. That way, the browser itself is submitting the file. This has the side effect that you loose some functionality compared to XMLHttpRequests, like illustrated by the last remarks above.
I’m really happy with the result and the simplicity of the code. It allowed me to not touch any code outside of the form submission, and treat all form in the same way. When I started coding this, Dojo was the only solution I found, but Yahoo!’s YUI lib has gained the same functionality with its connection manager, taking the same approach of creating an IFRAME.

Related Content:

Posted by Dion Almaer at 9:05 am
4 Comments

+++--
3.8 rating from 45 votes

4 Comments »

Comments feed TrackBack URI

Since this topic is of interest, a reusable JSF 1.2 Ajax Fileupload component with Progress Bar is available in the Java BluePrints Solution Catalog. The Progress Bar that is encapsulated in the component, uses a second AJAX request to retrieve upload status. This component utilized Dojo 0.3.0 and Apache Commons Fileupload 1.1.1 & IO 1.2 third party libraries to provide JavaScript and Multi-part Mime parsing functionality. It also uses Apache Shale Remoting libraries to handle the static resource loading (JavaScript file and CSS file) and to delegate the upload function to a managed bean. To use the component all you need to do is bundle the libraries with your application. No other deployment descriptor configuration is necessary.

The user documentation for the JSF 1.2 Fileupload Component is located at https://blueprints.dev.java.net/complib/v2/file-upload.html and a screen shot of the example application that resides in the Java BluePrints Solution Catalog which uses the component is located at .https://blueprints.dev.java.net/complib/v2/file-upload-image.html.

To see a full list of components available in the library, please visit https://blueprints.dev.java.net/ajaxcomponents.html

Hope this helps…

Thanks – Mark

Comment by Mark — July 21, 2006

So let me get this straight. There is no need to save a file on your own servers at all? it goes directlky from the javascript client to s3?!! please tell me i’m not dreaming because that’s a huge savings!!

Comment by Epipheus — January 24, 2007

An applet could allow to upload files and folders directly from browser to Amazon S3 bucket. It could have MD5 checkings and ACL. See Amazon S3 upload applet:
http://www.javazoom.net/applets/jclientupload/tools/s3upload/s3upload.html

Comment by JavaZOOM — July 29, 2007

If you are using .NET you can check http://www.flajaxian.com/ or in codeplex http://www.codeplex.com/FlajaxianS3Upload to be used with https://www.codeplex.com/FlajaxianFileUpload The tool is free open source with progress bar and very customizable!

Comment by vladb — February 15, 2008

Leave a comment

You must be logged in to post a comment.