DropzoneJS: upload files and submit form with array of names

Question

So I have this long complex form (I'll just make it short)

 <form>
    <section>
        <input type="text" name="customer" id="customer">
        <input type="text" name="address" id="address">
        <input type="text" name="contact_number" id="contact_number">
    </section>
    <section>
        <input type="text" name="product_name[]" class="product_name">
        <input type="text" name="qty[]" class="qty">
        <input type="text" name="brand[]" class="brand">
        <input type="text" name="model[]" class="model">

        <div class="file_upload"></div>

        <button type="submit" id="submit_btn">Submit Form</button>
    </section>

 </form>

and I am using DropzoneJS for uploading files. the problem here is that I need to pass the form fields values especially the ones with the inputs with array of name attributes.

here's my JS code so far:

 var myDropzone = new Dropzone("div.file_upload", {
    url: upload,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    maxFilesize: 500,
    paramName: "file",
    init: function(){
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("product_name", $(".product_name").serialize());
            formData.append("qty", $(".qty").serialize());
            formData.append("brand", $(".brand").serialize());
            formData.append("model", $(".model").serialize());
            formData.append("customer", $("#customer").val());
            formData.append("address", $("#address").val());
            formData.append("contact_number", $("#contact_number").val());
        });
        this.on("successmultiple", function(files, response) {
          console.log('success sending')
        });
        this.on("errormultiple", function(files, response) {
          console.log('error sending')
        });
    }
});

 $("#submit_btn").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    myDropzone.processQueue();
 });

when i click the submit button I got an error in the console saying $(...).processQueue is not a function

also, am I doing it right on sending the name arrays on my backend?? I use serialize() for each class..

it is an array of products to be sent to the server.. then the file uploads are supporting documents from user such as ID, order form, etc.. — Kim Carlo
– Kim Carlo, Commented Dec 26, 2016 at 8:06
But as it is right now there is only one input of each type for every upload, even if you upload more than one image. — wallek876
– wallek876, Commented Dec 26, 2016 at 8:08

wallek876 · Accepted Answer · 2016-12-26 18:14:36Z

1

The error you are getting is because you need to move the processQueue() method inside the init function. And for the rest there are some minor mistakes, like the way you append the arrays, this should work:

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("div.file_upload", {
    url: 'upload.php',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    maxFilesize: 500,
    paramName: "file",
    init: function(){

        $("#submit_btn").click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        this.on("sendingmultiple", function(data, xhr, formData) {
            $('.product_name').each(function(){
                formData.append("product_name[]", $(this).val());
            });
            $('.qty').each(function(){
                formData.append("qty[]", $(this).val());
            });
            $('.brand').each(function(){
                formData.append("brand[]", $(this).val());
            });
            $('.model').each(function(){
                formData.append("model[]", $(this).val());
            });
            formData.append("customer", $("#customer").val());
            formData.append("address", $("#address").val());
            formData.append("contact_number", $("#contact_number").val());
        });
        this.on("successmultiple", function(files, response) {
          console.log('success sending')
          console.log(response);
        });
        this.on("errormultiple", function(files, response) {
          console.log('error sending')
        });
    }
});

Note that the class names of the inputs you have in the html are wrong.

edited Dec 26, 2016 at 18:14

answered Dec 26, 2016 at 8:17

wallek876

3,2692 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wallek876 Over a year ago

@KimCarlo where are the other inputs in the html?

wallek876 Over a year ago

@KimCarlo just added a loop for the inputs.

Collectives™ on Stack Overflow

DropzoneJS: upload files and submit form with array of names

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related