Dropzone.js 5.0 - use existing images and send the data to the server

Question

I have successfully used Dropzone to display existing files from my server. However, when I submit the form, only new files are submitted to the server, so I don't know if the user has deleted any. Essentiall I want to send the data for all the files currently displayed, including the 'mocked' files and the newly uploaded ones.

I am using autoProcessQueue: false so that I can have a separate submit button to send the data to the server.

My Code:

    Dropzone.options.createListingForm = {

        autoProcessQueue: false,
        uploadMultiple: true,
        previewsContainer: '.create-listing-form-uploads',
        parallelUploads: 100,
        maxFiles: 100,
        addRemoveLinks: true,

        init: function () {
            var thisDropzone = this;
            var photos = form.data('photos');
            $.each(photos, function (key, photo) {
                var mockFile = {
                    name: photo.name,
                    size: photo.size,
                    type: photo.type,
                    accepted: true
                };

                thisDropzone.files.push(mockFile);    // add to files array
                thisDropzone.emit("addedfile", mockFile);
                thisDropzone.emit("thumbnail", mockFile, photo.path);
                thisDropzone.emit("complete", mockFile);

            });

        }
    };

    form.on('click', '.create-listing-form-save-photos', function () {

        $('.dropzone').get(0).dropzone.processQueue();

        return false;
    });

Thanks to this answer for the first part of my code: https://stackoverflow.com/a/45701181/5482719

score 0 · Answer 1 · answered Aug 17 '17 at 10:04

Each time a file (including mock Files) is removed/deleted from the dropzone, the removedfile event is fired.

You could use this event to delete the removed file from your server as follows:

    myDropzone.on("removedfile", function(file) {
        // 'file' parameter contains the file object.
        console.log('Removed File', file);

        // Delete file from server
        $.ajax({
            type: 'POST',
            url: 'url/that/handles/delete',
            data: {
                fileName: file.name,
            },
            dataType: 'json'
        }).done(function (response) {
            // check repsonse, notify user
        }).fail(function(resp) {
            console.log('xhr failed', resp);
        }).always(function(resp) {
            // do nothing for now
        });
    });

Hope that helps.

Yeah I suppose I can do something using that - I was just hoping that the autoProcessQueue function could include the mocked files somehow — Chris, Aug 18 '17 at 01:32

Dropzone.js 5.0 - use existing images and send the data to the server

1 Answers1