CODEWITHSUNDEEP
jqueryamazon-s3jquery-file-uploadjquery-fileupload-rails
Steve Robinson
Steve Robinson

Reputation: 3939

jQueryFileUpload - S3 - Empty file upload result error

I'm trying to setup S3 direct upload with the jQuery File Upload library (https://github.com/blueimp/jQuery-File-Upload/wiki/Upload-directly-to-S3). I'm using their latest version and here is how I'm initializing the plugin:

$(function() {
  $("#s3-uploader").data(
    "key",
    $("#s3-uploader")
      .find("input[name='key']")
      .val()
  );
  var settings = { path: "" };
  $("#s3-uploader").fileupload({
    limitConcurrentUploads: 1,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    dataType: "xml",
    paramName: "file",
    formData: function(form) {
      var data, fileType, key;
      data = form.serializeArray();
      fileType = "";
      if ("type" in this.files[0]) {
        fileType = this.files[0].type;
      }
      data.push({
        name: "content-type",
        value: fileType
      });
      key = $("#s3-uploader")
        .data("key")
        .replace("{timestamp}", new Date().getTime())
        .replace("{unique_id}", this.files[0].unique_id);
      data[1].value = settings.path + key;
      if (!("FormData" in window)) {
        $("#s3-uploader")
          .find("input[name='key']")
          .val(settings.path + key);
      }
      return data;
    }
  });
});

And here are the extra form data I'm sending to satisfy S3 requirements:


<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="key" id="key" value="uploads/{timestamp}-{unique_id}-4c9ded19e2649ab92c6d37e6e30e679a/${filename}">
<input type="hidden" name="acl" id="acl" value="public-read">
<input type="hidden" name="AWSAccessKeyId" id="AWSAccessKeyId" value="<KEY>">
<input type="hidden" name="policy" id="policy" value="<POLICY>">
<input type="hidden" name="signature" id="signature" value="JOK4zvx/jAJbUXHzWGGUJ8pxk5E=">
<input type="hidden" name="success_action_status" id="success_action_status" value="201">
<input type="hidden" name="X-Requested-With" id="X-Requested-With" value="xhr">

The upload happens correctly and the file is available in S3, but then the upload throws this error: Empty file upload result

enter image description here

The response from S3 is an XML document:

<PostResponse><Location>htps://my-bucket.s3-accelerate.amazonaws.com/uploads%2F1583345823865-undefined-4c9ded19e2649ab92c6d37e6e30e679a%2F_102035t8.JPG</Location><Bucket>my-bucket</Bucket><Key>uploads/1583345823865-undefined-4c9ded19e2649ab92c6d37e6e30e679a/_1020358.JPG</Key><ETag>"c77b13bec857d9470f360b363f7fb045"</ETag></PostResponse>

How do I make jQuery File Upload handle this response from S3 and consider it as success and parse the S3 URL? Thanks!

Upvotes: 0

Views: 139

Answers (1)

Steve Robinson
Steve Robinson

Reputation: 3939

Looks like jQuery File Upload does not handle this situation on its own. i.e it does not parse the XML document returned by S3. I borrowed some code from the s3_direct_upload gem to get the job done. You can find it here: https://github.com/waynehoover/s3_direct_upload/blob/master/app/assets/javascripts/s3_direct_upload.js.coffee#L72

Upvotes: 0

Related Questions