CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdropzone.js
Milano
Milano

Reputation: 18725

Dropzone - Uncaught Error: No URL provided

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?

Upvotes: 46

Views: 77237

Answers (2)

user20903268
user20903268

Reputation: 1

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

Upvotes: -2

lin
lin

Reputation: 18392

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>

Upvotes: 90

Related Questions