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.

Answer 1

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

Answer 2

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.