HDTuto.com

PHP Dropzone Allow only Images to Upload Example



This article will provide some of the most important example dropzone accept only csv file example. i would like to share with you allow only image in file upload dropzone js. This tutorial will give you simple example of dropzone accepted mime types. i explained simply step by step dropzone allow only images to upload. You just need to some step to done dropzone accept only images.

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:

<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? - HDTuto.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...




July 17, 2020 | Category : PHP



Blog Search