Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mikhalkov's avatar

Dropzone with mutifields form

Hey Guys, I hope everyone is well. I'm facing an issue integrating dropzone with multi fields form do you have any suggestion on how to implement multiple Images with other fields using dropzone or other libraries. Thank you

0 likes
3 replies
gitwithravish's avatar
Level 16

Add dropzone as a field in the form.

<!--...other fields-->
<div id="my-dropzone" class="dropzone"></div>
<input type="submit" id="submit" value="Submit">

write the following code while defining dropzone in javascript

init: function () {

            var dz = this;


            $btn.click(function (e) {

		//prevents the form from submitting
                e.preventDefault();

		//tell dropzone to process the form
                dz.processQueue();
            });

            this.on('sending', function (file, xhr, formData) {

                let data = {};

                // Append form fields to the foemData object that the dropzone sends to server
                $.each($form.serializeArray(), function (key, el) {
                    data[el.name] = el.value;
                    formData.append(el.name,el.value);
                });

                formData.append('content',getEditorContent());

		//or append data to formData object manually
		//e.g. just fetch whatever data you want using selector and append it to formData object
            });
        },
1 like
mikhalkov's avatar

Thank you ravish I've used filepond it work like charm.

gitwithravish's avatar

@mikhalkov Is filepond better in such scenarios where you have to send additional data with the upload files? I haven't used it. I am using dropzone in my current project and its giving me some hard time. In what ways filepond is better?

1 like

Please or to participate in this conversation.