BlueImp jQuery File Upload to Imgur

Question

I'd like to use the BlueImp jQuery fileupload plugin to upload images to imgur and get back the links.

While the API does not officially support it, it looks like it could; but all the configurations I've tried give me errors form Imgur that im not passing some data that I am passing.

Here's a link to the plugin:

https://github.com/blueimp/jQuery-File-Upload

This was my last code attempt:

<input id="imageupload" type="file" name="file" accept="image/jpg, image/jpeg, image/png, image/gif" multiple>

.

$(function () {

$('#imageupload').fileupload({
  url: 'https://api.imgur.com/3/image',
  headers: {
    Authorization: 'Client-ID XXXXXXXX'
  },
  dataType: 'json',
  data: {
    image: 'file'
  },
  done: function (e, data) {
    $.each(data.result.files, function (index, file) {
      $('<p/>').text(file.name).appendTo('#files');
    });
  },
  progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width',progress + '%');
  }
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');

});

the response I get back from uploading a PNG or JPG under 1MB is:

{"data":{"error":"Image format not supported, or image is corrupt.","request":"\\/3\\/image","method":"POST"},"success":false,"status":400}

Anyone got any ideas on howto get this working?

Answer 1

I've just tried your code without the following CSS and it works!

data: {
    image: 'file'
}

Here is my code:

 $('#image-upload').fileupload({ headers: {"Authorization": "Client-ID xxxxxxxxxxx"}, url: "https://api.imgur.com/3/image", dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css('width', progress + '%'); } }); 

 <input id="image-upload" type="file" name="image"> <div id="progress"> <div class="bar" style="width: 0%;"> </div> </div> 

Answer 2

If you're still having problems with this, removing "dateType" and "data" worked for me

dataType: 'json',
data: {
    image: 'file'
  }

Then log the data

 done: function (e, data) {

     console.log(data);
 }