CODEWITHSUNDEEP
javascriptjqueryfile-uploadimgur
Nicekiwi
Nicekiwi

Reputation: 4807

BlueImp jQuery File Upload to Imgur

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?

Upvotes: 1

Views: 810

Answers (2)

adam2645
adam2645

Reputation: 61

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);
 }

Upvotes: 0

Andriy Lach
Andriy Lach

Reputation: 121

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>

Upvotes: 2

Related Questions