Implementing Dropzone.js in existing form with php backend

Question

If this question has already been addressed I apologize and feel free to link to another discussion that will help me solve this issue. I have a registration form that I would like to incorporate Dropzone.js but am having difficulty doing so. My issues are:

1) when I can successfully get Dropzone.js to upload an image, I cannot process the additional form data which I am sending to a database and redirect the browser. If I can't utilize Dropzone.js as a 'preview' area and submit all data with the main form button, I would be fine with uploading the images in advance then submitting the balance of the form data with submit.

2) To reduce the chance of duplicate images, I want to rename the image before upload. Does the renameFile option work in Dropzone.js and is the "new name" available to the form on submit, or would I be better off saving the new filename as hidden input in the main form.

Again, if these issues have already been addressed, just link to the discussion and I apologize in advance if I am 'beating a dead horse'. :)

score 0 · Answer 1 · edited May 23 '17 at 10:29

Found solution working through it a bit further. Implemented Dropzone.js programmatically in a tag with following JS options:

<script>
            Dropzone.options.myDropzone= {
                    url: 'upload.php',
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    parallelUploads: 5,
                    maxFiles: 5,
                    maxFilesize: 5,
                    acceptedFiles: 'image/*',
                    addRemoveLinks: true,
                    init: function() {
                        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                        // for Dropzone to process the queue (instead of default form behavior):
                        document.getElementById("submit").addEventListener("click", function(e) {
                            // Make sure that the form isn't actually being sent.
                            e.preventDefault();
                            e.stopPropagation();
                            dzClosure.processQueue();
                            dzClosure.on("queuecomplete", function() {
                                window.location.href = "postreg.php";
                            });
                        });

                        //send all the form data along with the files:
                        dzClosure.on("sendingmultiple", function(data, xhr, formData) {
                            formData.append("First_Name", jQuery("#First_Name").val());...

There were a few dependent modules omitted from the processing script responsible for the failure of connecting to the database and adding the record... a total brainfart on my part. Discovered and implemented the queueComplete event from Go to another page after files have completed uploading in dropzone.js v4.0

This solution is exactly what I was hoping for with no compromises. Glad I took the time to dig other Dropzone posts and find all the elements I needed to solve this issue.

Implementing Dropzone.js in existing form with php backend

1 Answers1