How to allow only one file to upload in dropzone js?


I am using jQuery Dropzone js plugin in one of my projects and I would like to know how can I force it to allow only one file upload at a time.

I know about maxFiles attribute, but what I need is that only one file should be there in Drag and drop area, if i upload another file, last one should be automatically removed.

Here is my current code

  var currentFile = null; 
  Dropzone.autoDiscover = false;
        $('#dropzoneForm').dropzone({
            //parameter name value
            paramName: "files",
            autoProcessQueue: false,
            maxFiles: 1,         
            addRemoveLinks: true,
            dictResponseError: 'Server not Configured',
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",// use this to restrict file type
            init: function () {
                var submitButton = document.querySelector("#SaveImage");
                var dropzoneForm = this;

                submitButton.addEventListener("click", function () {
                    dropzoneForm.processQueue();
                });
                this.on("addedfile", function (file) {
                    if (currentFile) {
                        currentFile.previewElement = null;
                        this.removeFile(currentFile);
                    }
                    currentFile = file;
                });
                this.on("success",
                    function (file) {
                        var res = eval('(' + file.xhr.responseText + ')');
                        dropzoneForm.removeFile(file);
                        $("#modalUploadPic").modal('hide');
                        window.location = res.newurl;
                    });
            }
        });

Above code works fine's, but It shows more than one files in drag and drop area, if I click upload it uploads the last file selected.


Asked by:- jaya
1
: 295 At:- 4/20/2018 2:46:31 PM
jQuery javascript dropzone allow one file upload






1 Answers
profileImage Answered by:- Sam

Basically, you need to remove the first/last file placed in dropzone using jQuery and show the new one only, this can be done using the following script in Dropzone js init:

init: function () {
                var submitButton = document.querySelector("#SaveImage");
                var dropzoneForm = this;

                submitButton.addEventListener("click", function () {                   
                        dropzoneForm.processQueue();                   
                });

                //this function check if there is an file already uploaded
                // if yes it removes the first/last file
                this.on("addedfile", function (file) {
                    if (this.files[1] != null) {
                        this.removeFile(this.files[0]);
                    }                    
                    
                });


                this.on("success",
                    function (file) {                      
                       
                        dropzoneForm.removeFile(file);                                                                 
                       
                    });
            }

Using the above function will work.

3
At:- 4/21/2018 9:16:04 AM
Thanks, I got your point, above code is working for me as needed 0
By : jaya - at :- 4/23/2018 11:47:10 AM
Excellent answer. 0
By : jaiprakash - at :- 5/3/2018 11:51:48 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use