Multiple files upload using Dropzone.js | PHP Example
In this article, we will share with you how to multiple files upload using dropzone.js in PHP application. we know many times we will need to built multiple files upload functionality in PHP project with validation check. so, dropzone.js is one of the best javascript libraries for multiple file upload.
Dropzone.js is one of the best javascript libraries for multiple files upload in the PHP project. it also provides many functions for check file upload validation like file size, file type, etc..
Here we see all the step by step
Preview
After doing all the following steps then you can get the following preview in your web browser when you run the PHP application.
Step - 1 Create the PHP project structure
First, we need to create the following structure for building a simple multiple file upload in PHP.
DropzoneExample
├── uploads
├── index.php
├── upload.phpStep - 2 Create index.php file
Now we need to create index.php file on your project root directory and simply write the simple HTML layout code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h3>Multiple files upload using Dropzone.js example | HackTheStuff</h3>
<p>Drag and drop files for uploading.....</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<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.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>Step - 3 Create upload.php file
Now, we need to create upload.php file and write into this file files uploading PHP code.
<?php
$uploadDir = 'uploads';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>Step - 4 Create uploads folder
Into the last, we should create one uploads folder on our project root directory. all uploaded files will be a store here.
Step - 5 Run PHP server
Go to your project root directory by a terminal and run the following command for run the PHP server
php -S localhost:8000Now open your browser and hit the following URL into the address bar
http://localhost:8000Conclusion
As you can see, multiple files uploading in PHP application is very easy using Dropzone.js we hope you like this article. if you like it then please give thumbs up and write the comment regarding any issue or questions.
Copyright 2023 HackTheStuff
