Dropzone: change acceptedFiles dynamically

Question

I'm trying to change the acceptedFiles Option of a previously created Dropzone.

This is how I set the Options:

$myDropzone.options.acceptedFiles = '.jpg, .png';

and this is the generated Dropzone:

var $myDropzone = $("#my-dropzone");
$myDropzone.dropzone({
    maxFiles: 100,
    maxFilesize: 32,
    acceptedFiles: ".jpg"});

The resulting error is:

TypeError: $myDropzone.options is undefined

UPDATE:

Seems like this is not running any errors:

$myDropzone.options = { acceptedFiles: '.jpg, .png' };

But there is also no change in accepting the new filetype.

Here the playground example: http://codepen.io/anon/pen/GqqLGo

Answer 1

Using the accept callback function mentioned in Dropzone's documention could work, but it doesn't restrict the file types displayed in the user's file explorer. It only discards the file after user selection if it doesn't have an accepted file extension. Instead, complete the following steps.

1. Change the accept attribute on the hidden input somewhere in your code so that it fires after the dropzone is initialized, but before the dropzone can be used by a user. This will limit the file types a user can select from.

   $('.dz-hidden-input').attr('accept', '.pdf, .doc, .docx');
   var mediaType = 'document';
   

2. Change the acceptedFiles option after a user adds a file to tell Dropzone what file types may be accepted. This technically could be added to any Dropzone event callback that fires before sending the file.

   $('#dropzone').dropzone({
       acceptedFiles: 'image/*',
       init: function () {
           this.on('addedfile', function (file, xhr, formData) {
               if (mediaType == 'document') {
                   this.options.acceptedFiles = '.pdf, .docx, .doc';
               }
           });
       }
   });
   

Answer 2

I myself ended up using this

$("input").each(function() 
{
    var type = $(this).attr('type');
    if(type == "file")
    {
        $(this).attr("accept", ".pdf");
    }
});

Answer 3

You can't change property acceptedFiles dynamically. But you can do like this:

var acceptedTypes = ['jpg','png']

$('#dropzone').dropzone({
url: url,
accept: function(file, done) {
            if ($.inArray(file.name.slice(-3), acceptedTypes ) >= 0) {
                //accepted file
                done();
            }
            else {
                //Unaccepted file revert
                this.removeFile(file);
            }
       }
});

Answer 4

This works for me

Dropzone.options.fileupload = {
        acceptedFiles: 'image/*,.mp3',
        maxFilesize: 100 // MB
    };

Answer 5

$myDropzone is a jQuery-Resultset and not a Dropzone instance.

On the webpage of Dropzone you can find this information near Version 2.0:

Another thing that changed, is that Dropzone no longer stores its instances inside the element’s data property. So to get a Dropzone for an element do this now:

// DEPRECATED, do not use:
$("#my-dropzone").data("dropzone"); // won't work anymore  
// Do this now:   
Dropzone.forElement(element); // Providing a raw HTMLElement
// or
Dropzone.forElement("#my-dropzone"); // Providing a selector string.

If you want to access the dropzone element that is assigned to a given element you need to use Dropzone.forElement(element);

To access or change the options for the element in your jQuery result set you would need to do it that way:

Dropzone.forElement($myDropzone.get(0)).options.acceptedFiles = '.jpg, .png';

Answer 6

Change 2° parameter for type that you want:

myDropzone.hiddenFileInput.setAttribute("accept", '.png,.jpg');