Configuration

Register Configuration

Except DROPZONE_SERVE_LOCAL, when you use other configuration variable, you have to call dropzone.config() in template to make them register with Dropzone:

<body>
    ...
    {{ dropzone.config() }}
</body>

Tip

Call this method after dropzone.load_js() or <script> that include Dropzonejs.

Available Configuration

The supported list of config options is shown below:

Name Default Value Info
DROPZONE_SERVE_LOCAL False Default to retrieve dropzone.js from CDN
DROPZONE_MAX_FILE_SIZE 3 Max allowed file size. unit: MB
DROPZONE_INPUT_NAME file The name attribute in <input> (i.e. <input type="file" name="file">)
DROPZONE_ALLOWED_FILE_CUSTOM False See detail below
DROPZONE_ALLOWED_FILE_TYPE 'default' See detail below
DROPZONE_MAX_FILES 'null' The max files user can upload once
DROPZONE_DEFAULT_MESSAGE "Drop files here to upload" Message displayed on drop area, you can write HTML here (e.g. Drop files here<br>Or<br><button type="button">Click to Upload</button>)
DROPZONE_INVALID_FILE_TYPE "You can't upload files of this type." Error message
DROPZONE_FILE_TOO_BIG "File is too big {{filesize}}. Max filesize: {{maxFilesize}}MiB." Error message
DROPZONE_SERVER_ERROR '"Server error: {{statusCode}}"' Error message
DROPZONE_BROWSER_UNSUPPORTED "Your browser does not support drag'n'drop file uploads." Error message
DROPZONE_MAX_FILE_EXCEED "You can't upload any more files." Error message
DROPZONE_UPLOAD_MULTIPLE False Whether to send multiple files in one request.
DROPZONE_PARALLEL_UPLOADS 2 How many uploads will handled in per request when DROPZONE_UPLOAD_MULTIPLE set to True.
DROPZONE_REDIRECT_VIEW None The view to redirect when upload was completed. If you want pass an URL, usually when your view accepts variable, you can pass it with redirect_url keyword in template: {{ dropzone.config(redirect_url=url_for('endpoint', foo=bar)) }}.
DROPZONE_ENABLE_CSRF False Enable CSRF protect, see detail below
DROPZONE_TIMEOUT None The timeout to cancel upload request in millisecond, default to 30000 (30 second). Set a large number if you need to upload large file.

File Type Filter

Just set DROPZONE_ALLOWED_FILE_TYPE to one of default, image, audio, video, text, app, for example:

app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image'

If you want to set the allowed file type by yourself, you need to set DROPZONE_ALLOWED_FILE_CUSTOM to True, then add mime type or file extensions to DROPZONE_ALLOWED_FILE_TYPE, such as:

app.config['DROPZONE_ALLOWED_FILE_CUSTOM'] = True
app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image/*, .pdf, .txt'

Consult the dropzone.js documentation for details on these options.

Custom Configuration String

Sometimes you may need more flexible, you can use custom_init``and ``custom_options to pass custom JavaScript code:

{{ dropzone.config(custom_init='dz = this;document.getElementById("upload-btn").addEventListener("click", function handler(e) {dz.processQueue();});',
                 custom_options='autoProcessQueue: false, addRemoveLinks: true, parallelUploads: 20,') }}

The code pass with custom_init will into init: function() {}, the code pass with custom_options will into Dropzone.options.myDropzone = {}. See the full list of available configuration settings on Dropzone documentation.

Overwriting Global Configuration

Sometimes you may want to use different configuration for multiple drop area on different pages, in this case, you can pass the specific keyword arguments into dropzone.config() directly.

The keyword arguments should mapping the corresponding configuration variable in this way:

  • DROPZONE_DEFAULT_MESSAGE –> default_message
  • DROPZONE_TIMEOUT –> timeout
  • DROPZONE_ALLOWED_FILE_TYPE –> allowed_file_type
  • etc

example:

{{ dropzone.config(max_files=10, timeout=10000, default_message='Drop here!') }}

In the end, the keyword argument you pass will overwrite the corresponding configurations.