Upload images to Imgur with Dropzone.JS

Question

I've made a page where the users of the site can upload a picture with drag 'n drop. For this I use Dropzone.JS (go to infosite or Github) and I will upload the files to Imgur.

The problem is that I didn't know how I can do this with DropZone.JS. Here is my code I use for implement the Dropzone-class.

<div class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</div>

<script src="~/Scripts/DropZone.js" type="text/javascript"></script>    

<script>
    var myDropzone = new Dropzone(".dropzone", { 
        url: "https://api.imgur.com/3/image", 
        Authorization: 'Client-ID MY_CLIENT_ID'
    });
</script>

Here is the response I get from Imgur

{
    "data": {
        "error": "An image ID is required for a GET request to /image",
        "request": "/3/image",
        "method": "GET"
    },
    "success": false,
    "status": 400
}

With this error:

XMLHttpRequest cannot load https://api.imgur.com/3/image. Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

I will also if the request succeed, get the url of the uploaded image from Imgur.

Looks like you might have a CORS issue please check the answer to this related question: stackoverflow.com/questions/25427627/… — Simon West
– Simon West, Commented Jan 19, 2016 at 17:02

Wenceslao Negrete · Accepted Answer · 2016-01-19 17:07:52Z

4

If the CORS-enabled service from imgur does not include "Cache-Control" via its Access-Control-Allow-Headers: response header, the CORS requirements are not satisfied and the request is rejected by the browser.

Try this instead:

var myDropzone = new Dropzone('.dropzone', {
    //...
    headers: {
        'Authorization': authorizationHeader,
        'Cache-Control': null,
        'X-Requested-With': null
    }
});

answered Jan 19, 2016 at 17:07

Wenceslao Negrete

5564 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

H. Pauwelyn Over a year ago

Oke, one step closer but now I've this response from Imgur

{"data": {"error": "No image data was sent to the upload api", "request": "/3/upload", "method": "POST"}, "success": false, "status": 400}

Wenceslao Negrete Over a year ago

With //... I mean: var myDropzone = new Dropzone('.dropzone', { url: "api.imgur.com/3/image", headers: { Authorization: 'Client-ID MY_CLIENT_ID', 'Cache-Control': null, 'X-Requested-With': null } });

H. Pauwelyn · Accepted Answer · 2016-01-20 12:42:47Z

0

By trying some code in the file Dropzone.js, I finally found it! I've added this line of code:

formData.append('image', file);

Also thanks to Wenceslao Negrete for his or her answer.

answered Jan 20, 2016 at 12:42

H. Pauwelyn

14.4k28 gold badges93 silver badges164 bronze badges

2 Comments

Matthew Spence Over a year ago

Please could you explain your solution?

user1021364 Over a year ago

The correct answer would be using paramName config and set it to "image". But I have not tried multiple file upload.

Collectives™ on Stack Overflow

Upload images to Imgur with Dropzone.JS

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related