javascriptflaskdropzone.js

Changing the default max filesize in Dropzone.js


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.

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>