Jquery filupload giving error JSON.parse: unexpected end of data

Question

I'm using Jquery_fileupload (JFU) to send files to an amazon s3 bucket.

When a file it chosen by the user, the file is auto uploaded successfully and amazon returns a status code 204 no content. I've changed the s3 policy to return a 200 code for simplicity.

The problem is JFU gives an error message for each file even though there's no error:

In firefox it's: SyntaxError: JSON.parse: unexpected end of data

In chrome it's: SyntaxError: Unexpected end of input

Any ideas to resolve this would be helpful. Thanks

JFU setup:

    $(document).ready(function() {
      $('#fileupload').fileupload({
        dropZone: $('#dropzone'),
        autoUpload: true,
        paramName: 'file',
        singleFileUploads: false,
        limitMultiFileUploads: 1,
        sequentialUploads: true,
        multipart: true,
        uploadTemplateId: null,
        downloadTemplateId: null,
        filesContainer: $('#upload-files-container'),
        uploadTemplate: function (o) {
          var rows = $();
          $.each(o.files, function (index, file) {
            var row = $('<tr class="template-upload fade">' +
            '<td class="preview"><span class="fade"></span></td>' +
            '<td class="name"></td>' +
            '<td class="size"></td>' +
            (file.error ? '<td class="error" colspan="2"></td>' :
            '<td><div class="progress progress-info progress-striped active">' +
            '<div class="bar" style="width:0%;"></div></div></td>'
            ) + '<td class="cancel"><button class="btn btn-warning">Cancel</button></td></tr>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
              row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
              );
            }
            rows = rows.add(row);
          });
          return rows;
        },
        downloadTemplate: function (o) {
          var rows = $();
          $.each(o.files, function (index, file) {
            var row = $('<tr class="template-download">' +
            (file.error ? '<td></td><td class="name"></td>' +
            '<td class="size"></td><td class="error" colspan="2"></td>' :
            '<td class="preview"></td>' +
            '<td class="name"><a></a></td>' +
            '<td class="size"></td><td colspan="2"></td>'
            ) + '</tr>');
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
              row.find('.name').text(file.name);
              row.find('.error').text(
                locale.fileupload.errors[file.error] || file.error
              );
            } else {
              row.find('.name a').text(file.name);
              if (file.thumbnail_url) {
                row.find('.preview').append('<a><img></a>')
                .find('img').prop('src', file.thumbnail_url);
                row.find('a').prop('rel', 'gallery');
              }
              row.find('a').prop('href', file.url);
            }
            rows = rows.add(row);
          });
          return rows;
        }
      })
    });

S3 Policy data if helpful:

def policy_data
  {
    expiration: @options[:expiration],
    conditions: [
      ["starts-with", "$utf8", ""],
      ["starts-with", "$key", ""],
      ["content-length-range", 0, @options[:max_file_size]],
      {bucket: @options[:bucket]},
      {acl: @options[:acl]},
      {success_action_status: "200"}
    ]
  }
end

Answer 1

Likewise, I found that Jquery_fileupload 'failed' because of improperly the formatted json response -- whether it's a browser issue or S3, I don't know. The file actually uploads just fine, but the invalid json throws an error.

At any rate, I fixed it by setting the JFU option:

dataType: 'xml'

then converting the response from xml to json. (For that I used the x2js library.)

Here's my AngularJS 'fileuploaddone' listener:

$scope.$on('fileuploaddone', function(e, data) {
  var response;
  response = x2js.xml2json(data.result);
  $scope.file_url = response != null ? (_ref = response.PostResponse) != null ? _ref.Location : void 0 : void 0;
});