Upload an image to amazon s3 on file input change asynchronously

Question

I know about jquery-file-upload and uploadify, but both seem to depend on flash solutions/fallbacks that dictate the user interface.

How can I upload an image file asynchronously just with javascript?

Every time the file input changes, I want to upload the image to s3 and then save the image location to the database asynchronously. Some ideas:

• POST directly to Amazon s3, and on success POST the image location to the database

However I'm not sure how to deal with authenticated access to s3 without revealing sensitive s3 keys.

Also, how could I guarantee a unique name for the new image file?

• Somehow serialize the image data, POST it as a string with ajax

The server would then put in the s3 bucket, save the location, etc. Can the image data be properly serialized and remade into an image? I know you can display preview images using FileReader , so potentially I could get the image data using it.

---

Please let me know if one of the above methods could work or if there is a simple way to make something like this work:

$('#file-upload').change(function() {
  // Asynchronously get image on amazon s3 and saved in the database
});

Should be possible, but all of the examples I've seen are very much tied to user interfaces with plugin solutions.

Answer 1

Forgot about this question! Got it working by preventing normal form submission like so:

var path = $('#form').attr('action');
$('#form').submit(function(evnt) {
  // stop normal submission
  evnt.preventDefault();  

  // POST it asynchronously
  var formData = new FormData(this);
  $.ajax({
    url: path,
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });
});