CODEWITHSUNDEEP
javascriptdropzone.jsdropzone
Muhammad Umar
Muhammad Umar

Reputation: 11782

Restrict Dropzone to upload only specific type of files

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.

Upvotes: 11

Views: 27804

Answers (2)

Muhammad Amir
Muhammad Amir

Reputation: 81

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();
  }
}

Upvotes: 4

zero298
zero298

Reputation: 26867

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:

Dropzone refusing file

See Dropzone's configuration documentation.

Upvotes: 18

Related Questions