Как вы загружаете одно изображение с Dropzone.js?

Question

Dropzone.js, кажется, загружает изображения в виде данных из нескольких частей. Как получить загрузку изображений таким же образом, как загрузка изображений будет работать с cURL или загрузка двоичных изображений с Postman?

Я получаю предварительно подписанный URL для S3 с сервера. Предварительно подписанный URL позволяет загружать изображения, но не поля формы:

    var myDropzone = new Dropzone("#photo-dropzone");
    myDropzone.options.autoProcessQueue = false;
    myDropzone.options.autoDiscover = false;
    myDropzone.options.method = "PUT";

    myDropzone.on("addedfile", function ( file) {
        console.log("Photo dropped: " + file.name );
        console.log("Do presign URL: " + doPresignUrl);
        $.post( doPresignUrl, { photoName: file.name, description: "Image of something"  })
            .done(function( data ) {
                myDropzone.options.url = data.url
                console.log(data.url);
                myDropzone.processQueue();
        });
    });

Если я использую возвращенный URL с Postman и устанавливаю тело в двоичный файл и прикрепляю изображение, тогда загрузка работает нормально. Однако, если библиотека Dropzone использует тот же URL для загрузки изображения в S3, я получаю 403, потому что S3 не ожидает полей формы.

Обновить:

Альтернатива Ajax работает, как показано ниже, с URL-адресом со знаком S3, но Dropzone.js, похоже, не желает помещать необработанные данные изображения в тело сообщения PUT.

            $.ajax( {
                    url: data.url,
                    type: 'PUT',
                    data: file,
                    processData: false,
                    contentType: false,
                    headers: {'Content-Type': 'multipart/form-data'},
                    success: function(){
                        console.log( "File was uploaded" );
                    }
                });

Answer 1

Установите maxFiles на 1.

  Dropzone.autoDiscover = false;
        dzAllocationFiles = new Dropzone("div#file-container", {
            url: "api.php?do=uploadFiles"
            , autoDiscover: false
                , maxFiles: 1
                , autoQueue: true
            , addRemoveLinks: true
            , acceptedFiles: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });

        dzAllocationFiles.on("success", function (file, response) {
    // Success Operations
        });

        dzAllocationFiles.on("maxfilesexceeded", function (file, response) {
            allocationFileNames = [];
            this.removeAllFiles();
            this.addFile(file);
        });

Answer 2

Добавьте ниже параметры, затем работайте.

myDropzone.options.sending = function(file, xhr) {
  var _send = xhr.send;
  xhr.send = function() {
    _send.call(xhr, file);
  }
}