Двойной (?) HTTP-запрос PUT с Dropzone.js? - PullRequest
0 голосов
/ 05 апреля 2019

Я пытаюсь использовать Dropzone.js с хранилищем Azure и ASP.NET для загрузки файла в хранилище Azure с помощью SAS.

Я могу просто создать и передать URL-адрес SAS представлению, которое использует Dropzone.js для загрузки файла. Я даже могу успешно сделать запрос HTTP PUT и загрузить файл, однако, я думаю, что с кодом что-то не так, несмотря на то, что он делает то, что должен.

<form class="dropzone" id="file-upload" action="@Model.ContainerURI"></form>


@section Scripts {
    <script type="text/javascript">

        Dropzone.options.fileUpload = {
           //autoProcessQueue: false,
            paramName: "file",
            method: 'put',
            headers: {
                "x-ms-blob-type": "BlockBlob"
            },
            clickable: true,
            uploadMultiple: true,
            maxFiles: 5,
            init: function () {
                this.on("addedfile", function (file) {
                    console.log('File Added!');
                    console.log(file);
                });

                this.on("processing", function (file) {
                    var cloudURL = this.options.url;
                    var fileName = file.name;
                    var hostURL = cloudURL.split("?")[0];
                    var sas = cloudURL.split("?")[1];
                    var fullURL = hostURL.concat("/", fileName, "?", sas);
                    console.log("full URL is: ", fullURL);
                    this.options.url = fullURL;
                });

                this.on("sending", function (file) {
                    console.log("In sending function");
                    xhr = new XMLHttpRequest(); 
                    xhr.open("PUT", this.options.url);
                    xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
                    xhr.send(file.data);
                });
            }
        };

    </script>
}

@Model.ContainerURI - это токен SAS, созданный из хранилища Azure. В настоящее время для конфигурации CORS хранилища Azure установлено значение * для PUT, и это все, что мне нужно. Приведенный выше код работает (за исключением того факта, что он не отправляет данные файла, если текстовый файл), но кажется, что я делаю запрос PUT дважды, что кажется ужасно ненужным. Я заметил, что если я не включил метод: PUT в мой Dropzone.options.fileUPload, я получу ошибку CORS. И если я опускаю xhr.setRequestHeader("x-ms-blob-type", "BlockBlob"); в функции отправки, он возвращается с 400, сообщающим, что один из требуемых заголовков отсутствует. Но когда я использую код точно так, как указано выше, все загружается нормально, без ошибок.

Я уверен, что не уверен на 100%, что Dropzone.js делает для меня под прикрытием, и объяснил бы грязный HTTP-запрос. Может ли кто-нибудь дать разъяснения о том, когда использовать processing против sending задач Dropzone.js и когда лучше всего использовать оба? В основном, я просто думаю, что мне нужно лучше понять, что Dropzone делает для меня, и как я могу работать с ним, чтобы соответствовать моим потребностям.

...