javascriptdropzone.js

Dropzonejs cancel not works


I have this options config for Dropzonejs:

function getDndOptions(
    url,
    acceptedFiles,
    translations,
    type,
    afterRedirect,
    showProgress,
    parallelUploads
)
{
    var dropzoneOptions = {
        url: url,
        myAwesomeDropzone: false,
        parallelUploads: parallelUploads,
        //maxFilesize: number from post_max_size,
        addRemoveLinks: true,
        //params: {'param_1':'xyz','para_2':'aaa'},
        headers: {
            "X-CSRF-Token": jQuery("meta[name=csrf-token]").attr("content"),
            "X-Requested-With": "XMLHttpRequest",
            "X-Ajax": 1,
        },
        dictDefaultMessage: translations["DNDUPLOAD"],
        dictCancelUpload: translations["CANCEL"],
        dictRemoveFile: translations["DELETE"],

        init: function () {
            var myDropzone = this;
            this.on("queuecomplete", function (file) {

                if (afterRedirect) {
                    window.location.reload();
                }
            });
            this.on("addedfiles", function (file) {
                if (showProgress) {

                }
            });
            this.on("sending", function (file, xhr, data) {
                if (type) {
                    data.append("type", type);
                }
            });

            // Setup the observer for the button.
            jQuery("#clear_dropzone").on("click", function () {
                myDropzone.removeAllFiles();
                // If you want to cancel uploads as well, you
                myDropzone.removeAllFiles(true);
            });

            jQuery.ajax({
                headers: myDropzone.options.headers,
                type: 'GET',
                url: myDropzone.options.url,
                data: {id: name, type: type, method: "list"},
                dataType: 'html',
                success: function (data) {
                    var arrayData = JSON.parse(data);
                    jQuery.each(arrayData, function (key, value) {
                        var mockFile = {name: value.name, size: value.size};
                        myDropzone.emit("addedfile", mockFile);
                        myDropzone.options.thumbnail.call(myDropzone, mockFile, value.path);
                        myDropzone.emit("complete", mockFile);
                    });
                }
            });
        },
        params: function (files, xhr, chunk) {
            if (chunk) {
                return {
                    dzUuid: chunk.file.upload.uuid,
                    dzChunkIndex: chunk.index,
                    dzTotalFileSize: chunk.file.size,
                    dzCurrentChunkSize: chunk.dataBlock.data.size,
                    dzTotalChunkCount: chunk.file.upload.totalChunkCount,
                    dzChunkByteOffset: chunk.index * this.options.chunkSize,
                    dzChunkSize: this.options.chunkSize,
                    dzFilename: chunk.file.name,
                    userID: "<%= UserID %>",
                };
            }
        },
        chunking: true,
        forceChunking: true,
        chunkSize: 1 * 1024 * 1024,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
        chunksUploaded: function (file, done) {
            done();
        },
        sending: function (a, b, formdata) {
            // in case you want to add data and not override chunk info
            $.each(this.options.params, function (nm, vl) {
                formdata.append(nm, vl);
            });
        },
        canceled: function (file) {
            var _this = this;
            //send dzUuid as folder
            var name = file.upload.uuid;

            var _this = this;
            jQuery.ajax({
                headers: _this.options.headers,
                type: 'POST',
                url: _this.options.url,
                data: {id: name, type: type, method: "cancel"},
                dataType: 'html',
                success: function (data) {
                    //$("#msg").html(data);
                    //console.log(data);
                }
            });
            return this.emit("error", file, this.options.dictUploadCanceled);
        },
        removedfile: function (file) {

            var name = file.name;
            var _this = this;
            jQuery.ajax({
                headers: _this.options.headers,
                type: 'POST',
                url: _this.options.url,
                data: {id: name, type: type, method: "delete"},
                dataType: 'html',
                success: function (data) {
                    //$("#msg").html(data);
                    //console.log(data);
                }
            });

            var _ref;
            if (file.previewElement) {
                if ((_ref = file.previewElement) != null) {
                    _ref.parentNode.removeChild(file.previewElement);
                }
            }
            return this._updateMaxFilesReachedClass();
        },
    };

    if (acceptedFiles) {
        dropzoneOptions["acceptedFiles"] = acceptedFiles;
    }

    return dropzoneOptions;
}

Problem is that when I click for Cancel button under file which is in uploading process, uploading still continue on background. canceled event is fired to backend when last chunk is uploaded. I excepts that all upload processes of the file will be canceled. Is anything wrong with my options or is anything missing there? Otherwise all is working well. Thank you for help.


Solution

  • I found that Dropzonejs missing code for cancel chunked files. In function:

    value: function cancelUpload(file)
    

    I changed first for like this:

    for (
      var _iterator19 = groupedFiles[Symbol.iterator](), _step19;
      !(_iteratorNormalCompletion19 = (_step19 = _iterator19.next())
        .done);
      _iteratorNormalCompletion19 = true
    ) {
      var groupedFile = _step19.value;
      if(typeof step19.value.upload.chunks !== undefined) {
        var chunks = _step19.value.upload.chunks;
        if (chunks) {
          for (var i = 0; i < chunks.length; i++) {
            if (chunks[i].xhr) {
              chunks[i].xhr.abort();
            }
          }
        }
      }
    
      groupedFile.status = Dropzone.CANCELED;
    }
    

    Problem was that chunked files was not aborted. Now it works as expected.