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.

Monofilament

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 – Beyrouth

thanks for the advice @EmmanuelDelay will do it too – Monofilament

Answer 1

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.

Exhalant

imho it would be best if dropzone delivered the error message without the thumbnail. – Armistice

Answer 2

If you want to check any other file format not only image like CSV or PDF.

accept: function(file, done) {
  if (file.type !== "text/csv") {
    done("File Type is not CSV!");
  } else {
    done();
  }
}

Interrupter