Загрузка чека Dropzone в хранилище Azure - PullRequest
Новая
       6

Загрузка чека Dropzone в хранилище Azure

0 голосов
/ 09 ноября 2018

Я пытаюсь использовать Dropzone для загрузки больших файлов напрямую в хранилище Azure с помощью SAS (Shared Access Signature).Это описано на стороне Azure здесь: https://docs.microsoft.com/en-us/rest/api/storageservices/Put-Block

Так что мне нужно получить blockId (строку Base64, которая идентифицирует отправляемый чанк) и поместить его в URL запроса, отправляющего этот чанк..

Dropzone теперь поддерживает чанкинг, поэтому я решил использовать это.К сожалению, реализации этого трудно найти.

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

Я могу отправитьblockId в данных формы, используя params, но, кажется, не может изменить URL-адрес из него.

Можно ли добавить blockId к моему URL?Или мне придется сначала отправить его на мой сервер и загрузить с него?Спасибо. 

$("#videoSection").dropzone({
            params: function (files, xhr, chunk) {
                console.log(chunk);

                xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');

                //I can get the blockId from the chunk here

                //this.options.url.replace("test") //doesn't work
                //xhr.open(this.options.method, this.options.url.replace("test"), true); //doesn't work

                return {"url": "test"}; //this returns form-data
            },
            url: "Create",
            method: "PUT",
            //headers: { "x-ms-blob-type": "BlockBlob" },
            chunking: true,
            chunkSize: 4000000,
            forceChunking: true,
            retryChunks: true,
            retryChunksLimit: 3,
            autoProcessQueue: false,
            acceptedFiles: "video/*",
            maxFiles: 1,
            maxFilesize: 3000,
            previewTemplate: $("#videoTemplate").html(),
            dictDefaultMessage: "Drop Video Here",
            init: function () {
                this.on("processing", function (file) {
                    var blockId = 1;

                    @*this.options.url = "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
                        + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=block&blockid=")" + blockId;*@


                    var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                    progressBar.show();
                });
                this.on("chunksUploaded", function (file, done) {
                    $.ajax({
                        type: "PUT",
                        url: "@(Config.Value.StoragePrefix)/@(user.Company.StorageName)/inspections/@Model.InspectionData.Inspection.Id/videos/"
                            + file.name + "@Html.Raw(Model.SharedAccessSignature + "&comp=blocklist")",
                        success: function (data) {
                            done();
                        },
                        error: function (e) {
                            toastr.error(e);
                            console.log(e);
                        }
                    });
                });
                this.on("uploadprogress", function (file, progress, bytesSent) {
                    var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                    progress = bytesSent / file.size * 100;
                    progressBar.width(progress + "%");
                });
                this.on("success", function (file, response) {
                    var successCheckmark = $(file.previewElement).find(".dropSuccess");
                    successCheckmark.toggle();
                    var progressBar = $(file.previewElement).find(".dropzoneProgressBar");
                    progressBar.css("background-color", "green");
                });
            }
        });

1 Ответ

0 голосов
/ 24 ноября 2018

Проблема с этой строкой this.options.url.replace("test") //doesn't work. Это должно быть this.options.url = this.options.url.replace("test", "newValue") //this should work. Я использую аналогичный подход. Проблема в том, что обратный вызов params вызывается после открытия XmlHttpRequest, поэтому вам нужно установить URL для первого блока перед началом обработки файла, а в params вам нужно установить URL для следующего чанк для отправки (используйте chunk.index + 1 для индексации с нуля). Я не уверен, сработает ли это, если у вас включен parallelChunkUploads - я не проверял, является ли первый обрабатываемый блок первым. Дайте мне знать, если вам нужна дополнительная информация.

...