Restrict Dropzone to upload only specific type of files

Question

I am uploading files with Dropzone here is my code

<div>
    <form id="mainDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>


<div>
    <form id="recommendationDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>

Uploading works just fine however i want to restrict the type of upload documents

<script>

  Dropzone.options.dropzone = {
        acceptedFiles:'image/*'       
    };


</script>

Accepted files doesnt seem to be working , it just uploades everything.

What ever javascript solution you find, you must absolutely also filter out those files at server side (php or whatever). Client side security is good for user comfort, but it's useless as protection on server side. Double check everything — Emmanuel Delay, Jan 05 '18 at 16:59

score 11 · Accepted Answer · answered Jan 05 '18 at 16:10

You need to include the camelized ID of the dropzone element. For your example, you have the <form> with id="recommendationDiv" so you would set the options with:

Dropzone.options.recommendationDiv = {
    acceptedFiles: 'image/*'
};

You are setting the options for a form with id "dropzone" that doesn't exist. After setting with the correct id, you should see the correct behavior:

See Dropzone's configuration documentation.

Restrict Dropzone to upload only specific type of files

1 Answers1

Linked