Dropzone does not click and does not work

Question

My Dropzone does not click and does not work.

I already looked in other topics, but I didn't get the correct answer to my problem.

Here's my code:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename=dropzone_css) }}"/>
<script src="{{ url_for('static', filename=dropzone_js) }}"></script>

<div class="text-center">
    <div id="dropzone" class="m-3" style="max-width: 720px; display:none;">
        <form action="#" class="dropzone needsclick dz-clickable" id="demo-upload">
          <div class="dz-message needsclick">
            <button type="button" class="dz-button">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit; font-size: large;">test, test, test,test, test</font>
                </font>
            </button>
          </div>
        </form>
    </div>
    <div class="conteudo_envia_zona m-4" style="display:none">
    </div>
</div>

what should I do?

Answer 1

it's necessary to make a dropzone instance in jquery:

$("#demo-upload").dropzone();

details at: https://www.dropzonejs.com/#create-dropzones-programmatically

Answer 2

First of all, it is not clear, why you set css property display:none of your dropzone div element:

<div id="dropzone" class="m-3" style="max-width: 720px; display:none;">

I used your code and it worked for me without any problems: Your Dropzone on my localhost

The only changes I made to set display:block property of the div element and binding the Dropzone JS and CSS files locally.

I believe your problem is, that Dropzone files are not loaded correctly. Please open the Developer Tools windows of your browser and check if there are some error on the "console" tab.