submit additional form data with dropzone.js

Question

I have the following code that runs perfectly for uploading multiple images but I need to send some additional data via a form using plain js. how to do that? I also need to post additional parameters with the submission which would pull data using the javascript way: document.getElementById("someid").value;

<div class="container">
    <div id="msg"><?php echo isset($msg)?$msg:''; ?></div>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">
                <div class="dropzone dz-clickable" id="myDrop">
                    <div class="dz-default dz-message" data-dz-message="">
                        <span>Drop files here to upload</span>
                    </div>
                    <input type="text" name="somename" value="this is input data" />
                    <!-- data like this -->
                </div>
            </div>
            <div class="form-group">
                <button type="submit" id="add_file" class="btn btn-primary" name="submit"><i class="fa fa-upload"></i> Upload File(s)</button>        
            </div>
        </div>
    </div>
</div>
<!--Only these JS files are necessary--> 
<script src="dropzone/dropzone.js"></script>
<script>
//Dropzone script
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", 
 { 
     paramName: "__files", // The name that will be used to transfer the file
     addRemoveLinks: true,
     uploadMultiple: true,
     withCredentials: true,
     autoProcessQueue: false,
     parallelUploads: 50,
     maxFilesize: 20, // MB
     acceptedFiles: ".png, .jpeg, .jpg, .gif",
     url: "ajax/process.php",
 });

 
 /* Add Files Script*/
 myDropzone.on("success", function(file, message){
    $("#msg").html(message);
    //setTimeout(function(){window.location.href="index.php"},800);
 });
 
 myDropzone.on("error", function (data) {
     $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
 });
 
 myDropzone.on("complete", function(file) {
    myDropzone.removeFile(file);
 });
 
 $("#add_file").on("click",function (){
    myDropzone.processQueue();
 });
</script>

Dani · Accepted Answer · 2021-06-15 19:39:22Z

2

Add it to the init

var myDropzone = new Dropzone("div#myDrop", 
 { 
     paramName: "__files", // The name that will be used to transfer the file
     addRemoveLinks: true,
     uploadMultiple: true,
     withCredentials: true,
     autoProcessQueue: false,
     parallelUploads: 50,
     maxFilesize: 20, // MB
     acceptedFiles: ".png, .jpeg, .jpg, .gif",
     url: "ajax/process.php",
     init: function () {
         this.on('sending', function(file, xhr, formData) {
             // Append all form inputs to the formData Dropzone will POST
             var info = document.getElementById("someid").value;
             formData.append('info', info);
         });
     }
 });

answered Jun 15, 2021 at 19:39

Dani

92711 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

submit additional form data with dropzone.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related