45

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?

lin
  • 17,956
  • 4
  • 59
  • 83
Milano
  • 18,048
  • 37
  • 153
  • 353
  • What kind of option you like to add? its not clear what you asking for. An option could be everything. – lin Feb 02 '17 at 09:01
  • Options like maxFiles etc. But the main problem is to catch a response. – Milano Feb 02 '17 at 09:02
  • You catching the response right now near `console.log(response);` So what is the problem with it? – lin Feb 02 '17 at 09:02
  • Nothing is being logged except errors so there is some problem which I can't find. – Milano Feb 02 '17 at 09:04

2 Answers2

85

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>
lin
  • 17,956
  • 4
  • 59
  • 83
-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

user20903268
  • 1
  • 1
    Please post your code directly to the post, no need of adding extra URLs that can become invalid in future. – Tyler2P Jan 01 '23 at 10:21