How can change maxFiles in dropzone dynamically?

Question

I have a select option element in my project with two options, books and images. For book option, I want to allow only single file to upload. But for images option I need to allow multiple file selection. I am trying to this way but not succeeded:

 Dropzone.options.frmMediaDropzone = {
   maxFilesize: 99,
   acceptedFiles: ".jpeg,.jpg,.png,.gif,.pdf",
   parallelUploads: 1,
   addRemoveLinks: true,
   maxFiles: 100,
   init: function() {
     myDropzone = this;
     this.on("removedfile", function(file) {
       console.log(file);
     });

     this.on("success", function(file, response) {
       console.log(response.imageName);
     });
   }
 };

On option change, I am trying this:

Dropzone.options.frmMediaDropzone.maxFiles = 1;

But its not working. If anyone has idea please help.

Mayank Majithia · Answer 1 · 2018-03-07T07:09:34.983

1

Try this way to solve your problem,

you need to define a variable in javascript.

var myDropZone;

Initialize myDropZone vairable in init() event.

init: function() {

    myDropzone = this;
}

myDropzone became accessible so the statement

myDropzone.options.maxFiles = 1;

set clickable:false after a file upload done,

myDropzone.options.clickable = false;

remove file mannually after exceed max file limit.

myDropzone.on("maxfilesexceeded", function(file) {
    myDropzone.removeFile(file);
});

edited Mar 07 '18 at 07:09

answered Mar 07 '18 at 04:42

Mayank Majithia

1,916
16
21

Thankx Mayank, I just tried and found it works in the way that still allowed multiple files but upload only first file. It's better than nothing but is it possible that dropzone only allow single file? when I manually set maxFiles=1 then it only allows single file but it is not working dynamically and user still can select multiple file. – Kingra Morr Mar 07 '18 at 04:48
Just checked but uploadMultiple is not working dynamically even manually. I wondered that multiple attribue is only removing by setting maxFiles=1 manually. – Kingra Morr Mar 07 '18 at 05:06
I have checked and found that it is working but as a workaround. Because user still can select multiple images. Selecting multiple images may be confusing for end user. But many thanks for your kind assistance because I learnt many new things by your answer. Currently I get my requirements by implementing Ryan's answer. – Kingra Morr Mar 07 '18 at 06:15
if your problem not yet solve, you can make clickable:false after a single upload done. – Mayank Majithia Mar 07 '18 at 07:06
Thank you very much but the problem is resolved by adding id to hidden input and then accessing this id and removing multiple attribute. – Kingra Morr Mar 07 '18 at 09:08
happy to help you. – Mayank Majithia Mar 07 '18 at 09:23
Thanks, "Initialize myDropZone vairable in init() event" saved me – Robert Benyi Apr 30 '21 at 06:18

score 0 · Accepted Answer · answered Mar 07 '18 at 04:45

0

There a two ways of doing this. You can either dynamically create your dropzone and then change the attributes of it using .attr, or create a listener event in your init property when you define the dropzone.

See this link for a similar example (See the 2nd answer): Dropzone: change acceptedFiles dynamically

answered Mar 07 '18 at 04:45

Ryan Gibbs

1,292
1
15
27

Thanx Ryan, I think this would be helpful. But I have two dropzonez on same page and both having the same class. Is it possible to assign name to the inputs to get particular input? – Kingra Morr Mar 07 '18 at 05:07
Rather than using a class selector, use an id selector. $('#myid') rather than $('.myclass'). – Ryan Gibbs Mar 07 '18 at 05:17
Yes but this is I am asking that how can set id to hidden inputs because hidden inputs are generated by dropzone. below are these two hidden inputs without id or name: – Kingra Morr Mar 07 '18 at 05:25
I'm not sure I fully understand your meaning. In your html, you will have a form for your dropzone, so you can use that id. If you dynamically create a dropzone, you can assign it to a variable and then use that variable. – Ryan Gibbs Mar 07 '18 at 05:47
Yes Ryan, my form has an id but the dropzone generates hidden input file elements outside the form so form id can't help. But anyway on your suggestion I get the same thing by adding this line on dropzone init: function to assign the id to that hidden input: this.hiddenFileInput.setAttribute("id", "fileMedia"); And now other things are easy because I removed multiple attribute by using this id on option change. Thank you very much for your kind assistance. – Kingra Morr Mar 07 '18 at 06:19
Glad I could aim you in the right direction at least. – Ryan Gibbs Mar 07 '18 at 06:21

How can change maxFiles in dropzone dynamically?

2 Answers2