HTML 5 Amazon S3 Direct Loader

Question

I am looking for an HTML 5 AJAX library / framework for uploading files directly to Amazon S3. The goal is to not upload attachments to the web server (since it blocks the web server when transferring them to Amazon). I understand that this should be possible with XDomainRequest , but I cannot figure out how to do this.

I am running ruby-on-rails and wanted to give the downloaded file a temporary name (using the UUID) that will be sent back to the web server so that the file can later be renamed and integrated using paperclip.

Any ideas? Is this something that jQuery can handle? Flash is not an option for this project. Thanks!

Edit:

I managed to get the main position, but I still have problems. I'm not quite sure which headers are required, or how to encode the required Amazon parameters in the request (can I put them in the request header?). Here is my progress:

 const XMLHTTPFactories = [ function () { return new XDomainRequest(); }, function () { return new XMLHttpRequest(); }, function () { return new ActiveXObject("Msxml2.XMLHTTP"); }, function () { return new ActiveXObject("Msxml3.XMLHTTP"); }, function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, ]; var xhr = null; for (var i = 0; i < XMLHttpFactories.length; i++) { try { xhr = XMLHttpFactories[i](); break; } catch (exception) { continue; } } $(this).change(function () { for (var i = 0; i < this.files.length; i++) { var file = this.files[i]; xhr.open(settings.method, settings.url, true); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("Access-Control-Allow-Origin", "*") xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.send(file); } 

Edit:

After additional updates, I managed to get the following error:

XMLHttpRequest cannot load http://bucket.s3.amazonaws.com/ . The origin of http://local.app is not allowed by Access-Control-Allow-Origin.

I downloaded the crossdomain.xml file, which allows access from a wildcard (*) domain. Not sure how to proceed ...

Edit:

After you have done more research, I begin to think that JavaScript POST may not be possible for S3. Should I send a message to an EC2 instance before translating? I could provide a micro-instance, but I would prefer to go directly to S3 if possible! Thanks!

Edit:

I posted a question on Amazon forums and did not receive any feedback. For cross-references, another post can be found here: https://forums.aws.amazon.com/message.jspa?messageID=206650#206650 .

Answer 1

You need to make the Access-Control-Allow-Origin header another question. In your case, the other side is the Amazon S3 server. If they don’t mention your domain in this header, you won’t be able to cross-site with them.

Amazon S3 now supports Cross Origin Resource Sharing , and you can configure any of your S3 codes for cross-domain access by adding one or more CORS rules to your bucket. Each rule can specify a domain that should have access to your bucket and a set of HTTP verbs that you want to allow.

Answer 2

Today Amazon announces full support for Cross-Origin Resource Sharing (CORS) in Amazon S3. Now you can easily create web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, allowing you to drag and drop HTML5 to Amazon S3, show download progress, or update content.

Answer 3

That would mean that you have to expose your S3 credentials in JavaScript. You do not want this.

The best solution is to use Paperclip. Yes, you must first upload to your server, but at least it’s safe.

Do not pay attention to this, check the comments.

Answer 4

S3 can host html pages with jquery without any problems. The bucket becomes the server URL. If you use a tool like S3 Bucket Explorer, you can get the URL with one click for any HTML page in the bucket.

Then you can simply use the PUT command in XMLHttpRequest to load the files.

This is essentially like the jQuery-HTML5-Upload plugin for Amazon S3 (see their release number 12).

In fact, you can experiment with the Amazon S3 REST API syntax by simply connecting it to variables and then using this in combination with the XMLHttpRequest open () method.

The world in the multiverse.

Answer 5

Amazon has finally added Cross Origin Resource Sharing Support (CORS), which allows this:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 6

I haven't tried it myself, but it looks like this works in the jquery-html5-upload plugin

http://code.google.com/p/jquery-html5-upload/issues/detail?id=12

Answer 7

There is a good rail called s3_drect_upload that does exactly what you want out of the box. This is an html5 / javascript downloader with support for renaming files.