Dropzone - Uncaught Error: No URL provided

Question

I can't figure out how to get JSONresponse after uploading a file using Dropzonejs.

I have just this:

<script src="{% static "dropzone/dropzone.js" %}"></script>

<form id="id_dropzone" class="dropzone" action="/ajax_file_upload_handler/"
              enctype="multipart/form-data" method="post"></form>

I think it is not possible without manually initializing dropzone so I changed it to:

$("#id_dropzone").dropzone({
                maxFiles: 2000,
                url: "/ajax_file_upload_handler/",
                success: function (file, response) {
                    console.log(response);
                }
            });


<form id="id_dropzone" class="" action=""
              enctype="multipart/form-data" method="post"></form>

Which return Uncaught Error: No URL provided.

How can I initialize dropzone so I can add an options like maxFiles, maxSize and get JSON response?

Catnip

What kind of option you like to add? its not clear what you asking for. An option could be everything. – Apocarpous

Options like maxFiles etc. But the main problem is to catch a response. – Catnip

You catching the response right now near console.log(response); So what is the problem with it? – Apocarpous

Nothing is being logged except errors so there is some problem which I can't find. – Catnip

Answer 1

No URL provided happens when a Dropzone gets attached to an object without either:

• an action attribute on a form that tells dropzone where to post
• a configuration for specific dropzone

My bet is, that you have a race condition, where Dropzone attaches itself to an element before you configured it. Make sure that your configuration is either directly after the JS import, or that you set Dropzone.autoDiscover = false; and instantiate the Dropzone explicitly.

Take a look over here for more information.

<script src="{% static "dropzone/dropzone.js" %}"></script>

<script type="text/javascript">

   Dropzone.autoDiscover = false;

   $(document).ready(function () {
        $("#id_dropzone").dropzone({
            maxFiles: 2000,
            url: "/ajax_file_upload_handler/",
            success: function (file, response) {
                console.log(response);
            }
        });
   })
   
</script>

<form id="id_dropzone" 
      class="dropzone" 
      action="/ajax_file_upload_handler/"
      enctype="multipart/form-data" 
      method="post">
</form>

Apocarpous

But when you submit the files are empty – Mayfly

Answer 2

The way i solved out this issue was writting a script at the end of the code and specified defer in the script to be last thing load enter image description here

Here is a image from my code enter image description here I figure out everybody has similar code, so i hope you test and reply if you find out the solution

Blas

Please post your code directly to the post, no need of adding extra URLs that can become invalid in future. – Jorgan