Dropzone JS allow Only Image files to Upload

Dropzone JS allow Only Image files to Upload

As we all knows, dropzone js provides a feature to upload images. Here i will let you know dropzone js allow only image files to upload. There are some settings to restrict files to upload.

Here, we will also discuss to upload only pdf and only csv files. We will do these things through an example. Dropzone provides so many options to configure settings.

First thing before implementing these in our example. Let’s see what are these dropzone options to allow different files and sizes.

Allow Only Images

Dropzone.options.imageUpload = {

    maxFilesize:10,

    acceptedFiles: ".jpeg,.jpg,.png,.gif"

};

Allow Only Pdf files

Dropzone.options.imageUpload = {

    maxFilesize:10,

    acceptedFiles: ".pdf"

};

Allow Only CSV files

Dropzone.options.imageUpload = {

    maxFilesize:10,

    acceptedFiles: ".csv"

};

Now, let’s implement these into our dropzone js allow only image files to upload example.

<html>
<head>
  <title>Dropzone JS allow Only Image files to Upload</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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>Dropzone JS allow Only Image files to Upload</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>

Here in the above example i have putted upload.php file, you just need to create this file and write the logic to upload file.

You can change the value of maxFileSize and acceptedFiles according to your need.

You can also read the article to create star rating using bootstrap and jquery by clicking on the link below.

How to create star rating using bootstrap and jquery example