PHP Uploading Multiple files using Dropzone

635 views 1 year ago PHP

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.php

Step - 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:8000

Now open your browser and hit the following URL into the address bar

http://localhost:8000

Conclusion

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.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]