TypeError: $(…).dropzone is not a function

问题:

i'm triying to use dropzone in my django app, I followed many examples but none of them worked for me can you please help me

Js code :

     <script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet" type="text/css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      Dropzone.autoDiscover = false;
        $(document).ready(function(){
            $('#myDropzone').dropzone({
                url: "{% url 'dashboard/import' %}",
                addRemoveLinks: true,
                success: function (file, response) {
                    console.log("Successfully uploaded");
                },
                error: function (file, response) {
                    console.log("something goes wrong");
                }
            });
     });
     </script>

HTML code :

<form action="{% url 'dashboard/import' %}" class="dropzone">
     {% csrf_token %} 
</form>

I've got an TypeError: $(...).dropzone is not a function

回答1:

Try this :

window.onload = function() {
    Dropzone.autoDiscover = false;
    $('#myDropzone').dropzone({
            url: "{% url 'dashboard/import' %}",
            addRemoveLinks: true,
            success: function (file, response) {
                console.log("Successfully uploaded");
            },
            error: function (file, response) {
                console.log("something goes wrong");
            }
        });
   }

回答2:

By looking at the related javascript file, the function name dropzone starts with uppercase letter. So try the function with uppercase as shown below:

 $(document).ready(function(){
        $('#myDropzone').Dropzone({
            url: "{% url 'dashboard/import' %}",
            addRemoveLinks: true,
            success: function (file, response) {
                console.log("Successfully uploaded");
            },
            error: function (file, response) {
                console.log("something goes wrong");
            }
        });