Multiple File Upload using dropzone and with other forms fields with FormValidation plugin

Question

This is the image of form which I have designed in my project Now my requirement is to upload multiple files and with other form values over a single backend call.

<script>
<form class="form-horizontal" name="addColorForm" id="addColorForm"
                          enctype="multipart/form-data"
                          method="POST">
  //Colour Name and Code fileds
  //Files Uploader Plugin  (Dropzone)
 <input type="file" name="artworkFiles[]" style="visibility: hidden"/>
</form>

Now my script part

 <script>
    var validCode = function () { // my custom validation };
        FormValidation.validators.validCode = validCode;
        FormValidation.formValidation(
            document.getElementById('addColorForm'),
            {
                fields: {
                    colorName: {
                        validators: {
                            notEmpty: {
                                message: '${message(code:"blank.error.message", default:"This field must be entered")}'
                            },
                        }
                    },
                  },
                plugins: { //Learn more: https://formvalidation.io/guide/plugins
                    trigger: new FormValidation.plugins.Trigger(),
                    // Bootstrap Framework Integration
                    bootstrap: new FormValidation.plugins.Bootstrap(),
                    // Validate fields when clicking the Submit button
                    submitButton: new FormValidation.plugins.SubmitButton(),
                    // Submit the form when all fields are valid
                    // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                }
            }
        ).on('core.form.valid', function () {
            saveColor();
        });
    
        function saveColor() {
            var url = "url";
            var form = $("#createArtworkForm");
            var formData = new FormData(form[0]);
            $.ajax({
                url: url,
                type: 'POST',
                enctype: 'multipart/form-data',
                data: formData,
                success: function (data) {},
                cache: false,
                contentType: false,
                processData: false,
                error: function () { }
            });
        }

   var artworkColorsFiles = $('#kt_dropzone').dropzone({
    url: "https://www.google.com", // Set the url for your upload script location
    paramName: "media", // The name that will be used to transfer the file
    maxFiles: 1,
    maxFilesize: 40, // MB
    addRemoveLinks: true,
    acceptedFiles: "image/*",
    autoProcessQueue: false,
    accept: function (file) {
        //Logic to add multiple files in an input type hidden which is declared above
        let fileReader = new FileReader();

        fileReader.readAsDataURL(file);
        fileReader.onloadend = function () {

            let content = fileReader.result;
            $('#artworkFiles').val(content);
            file.previewElement.classList.add("dz-success");
        }
        file.previewElement.classList.add("dz-complete");
    }
 
});

</script>

My questions is how to implement this or how should i add my all files(max 3) in a input type file field declared as visibility hidden.

Answer 1

The same I did in my project here is the code hope it will help you. you have to use the dropzone function to send file and form data in sendingmultiple function you have to add a loop through your formdata enter code here

var data = $("form#OpportunityForm").serializeArray();
                $.each(data, function (key, el) {
                        .append(el.name, el.value);
                });



 $(document).ready(function () {
        zdrop = new Dropzone('#dropzone', {
            url: '@Url.Action("SaveOpportunity", "Masters")',
            maxFiles: 500,
            maxFilesize: 300,
            parallelUploads: 100,
            addRemoveLinks: true,
            autoProcessQueue: false,
            uploadMultiple: true,
            removeFilePromise: function () {
                return new Promise((resolve, reject) => {
                    let rand = Math.floor(Math.random() * 3)
                    console.log(rand);
                    if (rand == 0) reject('didnt remove properly');
                    if (rand > 0) resolve();
                });
            },
            sendingmultiple: function (file, xhr, formData) {
                var data = $("form#OpportunityForm").serializeArray();
                $.each(data, function (key, el) {
                        .append(el.name, el.value);
                });
                debugger
                $("form#OpportunityForm").find("input[type=file]").each(function (index, field) {
                    const file = field.files[0];
                    formData.append('itemfile', file);
                });

            },
            successmultiple: function (file, responseText) {
                jQuery('form#OpportunityForm').find('textarea, input').each(function () {
                    jQuery(this).val('');
                });
                clear();
                swal.fire("Opportunity Details Saved!", "Opportunity details Saved Successfully!", "success");
                OpportunityMstList();
                GetOpportunityMstList();
                location.reload();
                $("#myModal").modal('hide');
            },
        });

after adding this on the form submit button click you have to add this for creating blob file when you post data without image file.

  jQuery(document).on('click', 'button#saveOpportunity', function (e) {
    e.preventDefault();
    if ($("#OpportunityForm").validate().form()) {
        if (zdrop.files.length == 0) {
            var blob = new Blob();
            blob.upload = { 'chunked': zdrop.defaultOptions.chunking };
            zdrop.uploadFile(blob); // just submit the form
        } else if (zdrop.getRejectedFiles().length > 0) {
            alert("The attached file is invalid");
        } else {
            zdrop.processQueue();
        }
    }
});