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

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.