Загрузите изображения в Imgur с Dropzone.JS

Question

Я сделал страницу, где пользователи сайта могут загружать изображение с помощью drag 'n drop. Для этого я использую Dropzone.JS (перейдите к infosite или Github), и я загружу файлы в Imgur.

Проблема в том, что я не знал, как это сделать с помощью DropZone.JS. Вот мой код, который я использую для реализации класса Dropzone.

<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> 

Вот ответ, который я получаю от Imgur

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

С этой ошибкой:

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.

Я также, если запрос удастся, получить URL загруженного изображения с Imgur ,

Answer 1

Стараясь код в файле Dropzone.js, я, наконец, нашел его! Я добавил эту строку кода:

formData.append('image', file); 

Также спасибо Wenceslao Negrete за его или ее ответ.

Answer 2

Если служба CORS с поддержкой imgur не включает в себя «Cache-Control» через заголовок ответа Access-Control-Allow-Headers: ответ на запрос CORS не выполняется, и запрос отклоняется браузером.

Попробуйте вместо этого:

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