Hi Guys, In this tutorial, You can learn How to make Drag and Drop File Upload Feature with progress bar by using Pure Vanilla JavaScript with HTML CSS and PHP. In previous tutorial, we have already shared tutorial on how to Upload multiple file with progress bar using JavaScript with PHP by select multiple file from file tag but under this post, we will show you have can we upload multiple file by drag and drop feature with progress bar using JavaScript in PHP.
Do you know What is Drag and Drop File Upload, so if you not know then Drag and Drop file uploading means, we can directly upload file by drag and drop. By using Drag & Drop file upload feature, it has provide interfaces which will permits our web application to drag and drop files on the web page. We have seen this types of functionality on many websites on internet. So for make drag and drop features, there are many JavaScript libraries are available and by using that library we can build our own drag and drop multiple file upload feature by writing few lines of code but under this tutorial we will make drag and drop multiple file upload features by using pure JavaScript without using any in build library.
Under this Drag and Drop Multiple File Upload tutorial, there will be a drag area on web page, so when we have drag any file over this drag area then the border of that drag area will be change to solid and it will display copy file here text under drag area. So when we have drop multiple file under this drag area, then it will start uploading file one by one and it will display multiple file upload process in progress bar.
In this tutorial, we have use HTML, CSS JavaScript and Bootstrap 5 Style sheet library at client-side that means drag area we will create using HTML and CSS, files data get from drag and drop area using JavaScript, progress bar will be create using Bootstrap and at server side we have use PHP Script for upload multiple file on to the server. Below you can find source code of Drag and Drop Upload Multiple files with progress bar using JavaScript in PHP.
Source Code
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</title>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-5 text-center text-primary"><b>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</b></h1>
<div class="card">
<div class="card-header">Drag & Drop File Here</div>
<div class="card-body">
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<div id="drag_drop">Drag & Drop File Here</div>
</div>
<div class="col-md-3"> </div>
</div>
</div>
</div>
<br />
<div class="progress" id="progress_bar" style="display:none; height:50px;">
<div class="progress-bar bg-success" id="progress_bar_process" role="progressbar" style="width:0%; height:50px;">0%
</div>
</div>
<div id="uploaded_image" class="row mt-5"></div>
</div>
</body>
</html>
<style>
#drag_drop{
background-color : #f9f9f9;
border : #ccc 4px dashed;
line-height : 250px;
padding : 12px;
font-size : 24px;
text-align : center;
}
</style>
<script>
function _(element)
{
return document.getElementById(element);
}
_('drag_drop').ondragover = function(event)
{
this.style.borderColor = '#333';
return false;
}
_('drag_drop').ondragleave = function(event)
{
this.style.borderColor = '#ccc';
return false;
}
_('drag_drop').ondrop = function(event)
{
event.preventDefault();
var form_data = new FormData();
var image_number = 1;
var error = '';
var drop_files = event.dataTransfer.files;
for(var count = 0; count < drop_files.length; count++)
{
if(!['image/jpeg', 'image/png', 'video/mp4'].includes(drop_files[count].type))
{
error += '<div class="alert alert-danger"><b>'+image_number+'</b> Selected File must be .jpg or .png Only.</div>';
}
else
{
form_data.append("images[]", drop_files[count]);
}
image_number++;
}
if(error != '')
{
_('uploaded_image').innerHTML = error;
_('drag_drop').style.borderColor = '#ccc';
}
else
{
_('progress_bar').style.display = 'block';
var ajax_request = new XMLHttpRequest();
ajax_request.open("post", "upload.php");
ajax_request.upload.addEventListener('progress', function(event){
var percent_completed = Math.round((event.loaded / event.total) * 100);
_('progress_bar_process').style.width = percent_completed + '%';
_('progress_bar_process').innerHTML = percent_completed + '% completed';
});
ajax_request.addEventListener('load', function(event){
_('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';
_('drag_drop').style.borderColor = '#ccc';
});
ajax_request.send(form_data);
}
}
</script>
upload.php
<?php
//upload.php
if(isset($_FILES['images']))
{
for($count = 0; $count < count($_FILES['images']['name']); $count++)
{
$extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);
$new_name = uniqid() . '.' . $extension;
move_uploaded_file($_FILES['images']['tmp_name'][$count], 'images/' . $new_name);
}
echo 'success';
}
?>
Great tutorial, how would I go about adding a select file button to this to provide accessibility?
ReplyDelete