What is DropzoneJS?
DropzoneJS is a javascript library that helps to upload multiple files using AJAX. DropZoneJs gives Drag and Drop File Upload Functionality. There are common questions to us as web-developer how we allow users to allow upload multiple files. DropZoneJs is also previewing images thumbnail in the upload preview area. DropZoneJs is compatible with Bootstrap upload file UI. We can additionally restrict uploading only a single file upload to specific numbers of file upload.
DopzoneJS is easy to implement for a newbie PHP developer.
Benefits of DopzoneJs:
- Easy to implement
- Highly Customizable
- Easy to custom configuration
- Not Depend on JQuery
- Lightweight
- Drag and Drop File Upload
Integrate or Implement DropzoneJS in Php:
- To implement dropzone we need dropzone js file and css files
- First, you should download the dropzone project from https://github.com/enyo/dropzone.
- Copy download folder from that DropZoneJs project folder DropZoneJs and paste it into our project folder. In our case this our project folder is upload_demo.
- Rename that download folder as DropZoneJs in our project folder.
- Now we have to include javascript and CSS in our webpage file:
<script src="DropzoneJS/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="DropzoneJS/css/dropzone.css" />
<link rel="stylesheet" type="text/css" href="DropZoneJs/css/basic.css" />- Copy and paste below HTML code in the web-page where you want to put drag and drop UI:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
</form>- Copy below code in upload.php file:
<?php
$ds = DIRECTORY_SEPARATOR;
$upload_path = "uploads";
if($_FILE["file"]) {
move_uploaded_file($_FILES["file"]["tmp_name"], $upload_path .$ds. $_FILES["file"]["name"]);
}