Search code examples
javascriptdropzone

passing an additional textfield value when uploading files using Dropzone javascript framework

Hello I have developed a web page that uploads images using the Dropzone javascript framework.

I have got this working but I also intend to send some extra textfield data when uploading this file.

I made some checks and found this link below on stack overflow, but didn't seem to work

https://stackoverflow.com/questions/17872417/integrating-dropzone-js-into-existing-html-form-with-other-fields

so I have decided to post what I have done with the hope that someone else can correct my code to help me make it work

 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>

</head>



<form id="my-form" name="wle">

     <input type="hidden" value="wole" id="collect" name="collect" />
<div class="dropzone"></div>


<button id="startUpload">Upload</button>

</form>



<script>

    Dropzone.autoDiscover = false;

    $(document).ready(function () {
        var myDropzone = new Dropzone(".dropzone", {
            init: function () {

                $('#startUpload').click(function () {
                    myDropzone.processQueue();
                });
            },
            url: "upload.php",
            type: 'POST',
            autoProcessQueue: false,
             maxFilesize: 20,
  paramName: "file",
        maxFiles: 5,
        addRemoveLinks: true,
        acceptedFiles: ".jpg,.JPG.jpeg,.JPEG,.PNG,.png,.gif",

        //send all the form data along with the files:


            success: function () {
                //do stuff
            },
            error: function () {
                //do error notification
            }


        });
    });


</script>

the above code woks for uploading files,

but then I try to pass an extra field of data which I need saved in the database using this

 this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("collect", jQuery("#collect").val());

        });

but the Dropzone element stops working

so to rap it all I am trying to upload file and also submit text data at the same time.

please help

Solution

  • after more research work, I found a solution to my problem

    there is a function that allows to send in more parameters

    myDropzone.on("sending", function(file, xhr, formData) {
  // Will send the filesize along with the file as POST data.
  formData.append("filesize", file.size);
});

    found here below

    https://www.dropzonejs.com/#tips