Send Dropzone files with my own AJAX on form submit.

Question

I have an existing HTML form with several fields. I would like to use Dropzone to enhance the forms file input (listing thumbnail image upload) but I don't want to use any of Dropzones built in file uploading functionality. I simply need to access the selected files and send them along with my other form data, via AJAX, on my form submit.

$(document).one('submit', '#account-group-add-form', function(e) {

    e.preventDefault();

    // Form validation.

    // Build an array of the form vars.
    var form_values = {};
    // I add all of the forms data to this structure then send via AJAX.

    // Send the data to the server.
    $.ajax({
        type: 'POST',
        url: sp23_ajax.ajaxurl,
        data: {
            'action': 'sp23_account_group_add',
            'data': JSON.stringify(form_values)
        },
        success: function(data) {

            // Success.

        }
    });

});

The documentation of dropzone.js seems very good but I just cant find out how to access the files and attach them to my submit. Maybe I am missing something :+( http://www.dropzonejs.com/ — George Litchfield, Nov 16 '17 at 12:15
It is easier to do this the other way around - send your data along with Dropzone's, on submit. Here's an example: https://stackoverflow.com/a/46732882/6089612 — Don't Panic, Nov 20 '17 at 11:31

score 1 · Answer 1 · answered May 25 '21 at 13:59

I recently needed a solution where the user could add only one file, and send this file in a single form. This form should be sent via an AJAX call. Below is my solution:

Create dropzones programmatically
Set the attribute "autoProcessQueue" as false
In the init option, create 2 event listeners (addedfile and removedfile)
Create a global variable (attatchment). This variable will receive the file from dropzone

In event listeners, create a programming logic for your need (below is my example)

$('#myAttachmentField').dropzone({
url: 'ajax.php',
autoProcessQueue: false,
init: function() {
    let files = 0
    this.on("addedfile", function(file) {
        files++
        if (attachment == undefined && files === 1) attachment = file
    })
    this.on('removedfile', function(file) {
        files--
        if (files === 0) attachment = undefined
    })
}

})

Now you can access file with "attachment" variable Before send an ajax request, i do this validation:

var formData = new FormData()
formData.append('another_field', data)
if (attachment != undefined) formData.append('attachment', attachment)
$.ajax({
        url: 'ajax',
        type: 'POST',
        data: formData,
        dataType: 'JSON',
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        error: function () {
            noty({type: 'error', timeout: 2500, text: 'Erro ao salvar dados. Se o problema persistir, contate o administrador.'})
        },
        success: function(e) {
            if (e.success == false) {
                noty({type: 'error', timeout: 2500, text: 'Erro ao salvar dados. Se o problema persistir, contate o administrador.<br>' + e.message})
                return
            }
            noty({type: 'success', timeout: 2500, text: 'Novo dado salvo com sucesso.'})

        }
    })

Send Dropzone files with my own AJAX on form submit.

1 Answers1