How to Allow Only Images to Upload in Dropzone JS?

By Hardik Savani November 5, 2023 Category : jQuery

In this tutorial we will go over the demonstration of dropzone allow only images to upload. you can see dropzone accept only images. Here you will learn dropzone js allow only pdf to upload. dropzone accept only csv file example. i explained simply step by step allow only image in file upload dropzone js.

Sometime we need to allow only images or allow only pdf file to upload or allow only csv file to upload in dropzone js. then i will help you how to set mime types option to accept only needed file type.

Dropzone provide acceptedFiles option where you can set your file type list. If you want to allow only images or pdf or csv then you can see bellow solution.

Allow Only Images:

Dropzone.options.imageUpload = {
    maxFilesize:10,
    acceptedFiles: ".jpeg,.jpg,.png,.gif"
};

Allow Only PDF:

Dropzone.options.imageUpload = {
    maxFilesize:10,
    acceptedFiles: ".pdf"
};

Allow Only CSV:

Dropzone.options.imageUpload = {
    maxFilesize:10,
    acceptedFiles: ".csv"
};

Example:

Read Also: How to Allow Only One File to Upload in Dropzone?
<html>
<head>
  <title>How to Allow Only Images to Upload in Dropzone JS?</title>
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>How to Allow Only Images to Upload in Dropzone JS? - ItSolutionStuff.com</h2>
      <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
        <div>
          <h3>Upload Multiple Image By Click On Box</h3>
        </div>
      </form>
    </div>
  </div>
</div>
  
<script type="text/javascript">
  
    Dropzone.autoDiscover = false;
  
    var myDropzone = new Dropzone(".dropzone", { 
       maxFilesize: 10,
       acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });
      
</script>
  
</body>
</html>

i also added more tutorial about step by step file uploading with dropzone using php and laravel as bellow:

PHP Dropzone File Uploading Example

Laravel Dropzone File Uploading Example

Angular Dropzone File Uploading Example

PHP Dropzone File Upload on Button Click Example

Dropzone Allow Only File to Upload

I hope it can help you...

Tags :
Previous

How to Allow Only One File to Upload in Dropzone?
Next

How to Delete Uploaded File in Dropzone JS?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares