javascriptjquerydropzone.js

Retry uploading same files after failed upload? - DropZone.JS


I use DropzoneJs - https://github.com/enyo/dropzone I would like to resume failed uploads automatically.

I checked this issue and there is a solution for this

https://github.com/enyo/dropzone/issues/1150#issuecomment-253480122

This is my existing Dropzone config ( I tried to add the code but couldn't succeed )

var total_photos_counter = 0;
Dropzone.options.myDropzone = {
    uploadMultiple: true,
    parallelUploads: 1,
    maxFilesize: 100,
    previewTemplate: document.querySelector('#preview').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Resmi Sil',
    dictFileTooBig: 'Dosya 100 MB den büyük. Daha küçük boyutlu bir fotoğraf yükleyiniz' ,
    acceptedFiles: '.jpeg,.jpg,.png,.zip',
    dictCancelUpload: 'Yüklemeyi İptal Et',
    dictInvalidFileType: "Bu tip bir dosyayı yükleyemezsiniz. Sadece resim ve Zip yükleyebilirsiniz.",
    timeout: 100000000,



    init: function () {
        this.on("removedfile", function (file) {
            $.post({
                url: '/images-delete',
                data: {id: file.name, _token: $('[name="_token"]').val()},
                dataType: 'json',
                success: function (data) {
                    total_photos_counter--;
                    $("#counter").text("# " + total_photos_counter);
                }
            });
        });
    },
    success: function (file, done) {
        total_photos_counter++;
        $("#counter").text("# " + total_photos_counter);
    },
    error: function (file,response) {
        var dropzoneFilesCopy = dropzone.files.slice(0);
        dropzone.removeAllFiles();
        $.each(dropzoneFilesCopy, function(_, file) {
            if (file.status === Dropzone.ERROR) {
                file.status = undefined;
                file.accepted = undefined;
            }
            dropzone.addFile(file);
        });
    }
};

How will I add this solution into my config js. Just adding to end of file doesn't make any sense to me.

var dropzoneFilesCopy = dropzone.files.slice(0);
        dropzone.removeAllFiles();
        $.each(dropzoneFilesCopy, function(_, file) {
            if (file.status === Dropzone.ERROR) {
                file.status = undefined;
                file.accepted = undefined;
            }
            dropzone.addFile(file);
        });

Solution

  • You can use it inside the init section of your configuration for Dropzone, use the errormultiple event inside the init like below

    init: function () {
            this.on("removedfile", function (file) {
                $.post({
                    url: '/images-delete',
                    data: {id: file.name, _token: $('[name="_token"]').val()},
                    dataType: 'json',
                    success: function (data) {
                        total_photos_counter--;
                        $("#counter").text("# " + total_photos_counter);
                    }
                });
            });
    
            this.on('errormultiple',function(files, response){
                var dropzoneFilesCopy = files.slice(0);
                myDropzone.removeAllFiles();
                $.each(dropzoneFilesCopy, function(_, file) {
                   if (file.status === Dropzone.ERROR) {
                        file.status = undefined;
                        file.accepted = undefined;
                   }
                   myDropzone.addFile(file);
               });
            });
        },
    

    Note : you need to change the variables accordingly inside the script that you are using.