Dropzone - Can't set custom Dropzone.js options

Question

I am trying to use Dropzone.js on my Laravel website.

This is my setup:

index.blade.php:

<form action="/documents" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data">
  @csrf
</form>

And in my app.js file, I have below code:

window.Dropzone = require('dropzone');

(function () {
    Dropzone.autoDiscover = false;
    Dropzone.options.myDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 1, // MB
        acceptedFiles: 'image/*,application/pdf',
        parallelUploads: 8,
        addRemoveLinks: false,
        createImageThumbnails: false,
        autoProcessQueue: true,
        previewTemplate: document.getElementById('dropzone-preview-template').innerHTML,

        accept: function (file, done) {
            console.log(file.name)
        },

    };
});

The actual Dropzone element is appearing on the page, and I can use it to upload files. However, my Dropzone.options are not being respected.

For example, I can upload files larger than 1MB, I can upload all file types, even though I only want to be able to upload images and PDF files.

If I move this: Dropzone.autoDiscover = false; outside the (function () {});, the Dropzone element don't work at all.

What do I do wrong?

score 1 · Accepted Answer · answered Feb 27 '19 at 12:12

1

You have surrounded your code in a anonymous function but are not calling it, so the plugin options code is not being executed. Either remove this anonymous function, or call it, like so:

(function () {

})(); // call the function

answered Feb 27 '19 at 12:12

badsyntax

9,394
3
49
67

score 1 · Answer 2 · answered Feb 27 '19 at 13:45

try it like this instead:

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#dropzone", {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 1, // MB
  acceptedFiles: "image/*,application/pdf",
  parallelUploads: 8,
  addRemoveLinks: false,
  createImageThumbnails: false,
  autoProcessQueue: true,
  previewTemplate: document.getElementById("dropzone-preview-template")
    .innerHTML,

  accept: function(file, done) {
    console.log(file.name);
  }
});

Dropzone - Can't set custom Dropzone.js options

2 Answers2