Javascript - Changing the default max filesize in Dropzone.js

Javascript – Changing the default max filesize in Dropzone.js

Last updated: 2024/02/10 at 2:59 PM

Admin

2 Min Read

Problem:

I am trying to use Dropzone.js with Flask to allow larger files to be uploaded, but I am struggling to change the 256MB default max file size.

Contents

Problem:Solution:

At first I thought this was the Flask default, so I tried to change it via something like: app.config[‘MAX_CONTENT_LENGTH’] = 1024 * 1024 * 1024 * 50

This didn’t work, so my next presumption is that it is the javascript framework default. So I am trying to change that via maxFilesize – I’ve read quite a few posts online on various sites to try to determine what I am doing wrong.

<html>
  <head>
    <title>File Upload</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
  </head>
  <body>
    <h1>File Upload</h1>
    <form action="{{ url_for('upload_files') }}" class="dropzone">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script type="text/javascript">
        dropzone.options.uploadWidget = {
          maxFilesize:100000
        }</script>
  </body>

I initially changed the default in Flask via app.config[‘MAX_CONTENT_LENGTH’], then I tried to change it in javascript

Solution:

Check out the dropzone config

According to there the syntax should be

<script>
  // Note that the name "myDropzone" is the camelized
  // id of the form.
  Dropzone.options.myDropzone = {
    // Configuration options go here
  };
</script>
<form action="/target" class="dropzone" id="my-dropzone"></form>

In your case you seem to be missing the id id="upload-widget" and dropzone should be Dropzone

<form action="{{ url_for('upload_files') }}" class="dropzone" id="upload-widget"></form>
<script>
// maxFilesize is in MiB
Dropzone.options.uploadWidget = {
    maxFilesize: 100000
}
</script>