ItSolutionStuff.com

How to Allow Only One File to Upload in Dropzone?

By Hardik Savani • November 5, 2023
jQuery

In this example, i will show you dropzone allow only one file upload. We will look at example of dropzone js accept only one file. i would like to share with you how to allow only one file to upload in dropzone.js. it's simple example of dropzone js allow only one image. you will do the following things for dropzone js allow only one file.

If you have to allow only one file upload in dropzone js then i will help you how to add option to accept only one file in dropzone js. you can easily make solution with jquery, php, laravel and other framework too.

Dropzone JS provide "maxFiles" option there you can set max allow number of file. so you can make 1 as maxFiles in your js code. so let's see bellow code and you can make done your solution.

Solution:

Dropzone.options.imageUpload = {

maxFilesize:10,

maxFiles: 1,

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

};

Example:

<!DOCTYPE html>

<html>

<head>

<title>How to Allow Only One File to Upload in Dropzone?</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 One File to Upload in Dropzone?</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>

<button id="uploadFile">Upload Files</button>

</div>

</div>

</div>

<script type="text/javascript">

Dropzone.autoDiscover = false;

Dropzone.options.imageUpload = {

maxFilesize:10,

maxFiles: 1,

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

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular 9/8 Dropzone Image Upload Example

Read Now →

File Upload with Angular Reactive Forms Example

Read Now →

Laravel 7/6 Dropzone Image Upload Tutorial

Read Now →

File Upload using Vue js Axios PHP Example

Read Now →

PHP Dropzone Display Existing Files from Server Example

Read Now →

Multiple File Upload using Dropzone JS in PHP Example

Read Now →

Bootstrap - Input multiple tags example using Tag Manager Jquery Plugin

Read Now →

Laravel - Multiple Images Uploading using dropzone.js Example

Read Now →

JQuery Chosen Multi Select Dropdown Example

Read Now →