Ajax File uploads to Amazon S3
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.
