Hey friends, today in this blog you’ll learn how to create a Drag & Drop or Browse – File upload Feature using HTML CSS & JavaScript. In the earlier blog, I have also shared how to upload an image by clicking on the browse button but now in this blog, I’ll teach you how you can upload an image file by drag & drop or by clicking on the browse file button.
Drag and Drop file upload means you can upload the file by drag & drop. Drag and Drop interfaces permit web applications to drag and drop files on a web page. You may have seen this type of file upload feature on most sites. There are many JavaScript libraries to create this type of drag & drop file upload feature with a few lines of JavaScript codes but today in this blog I’ll create it with pure JavaScript means without using any library.
In this program [Drag & Drop or Browse – File upload Feature], on the webpage, there is a drop area container with some text, icon, and browse file button. When you drag any image file over the drag area, the border of the container also changed to solid, and the text “Drag & Drop to upload file” also changed to “Release to upload file”.
When you release your image file in the drag area, immediately the preview of that image will appear. You can also upload an image by clicking on the browse file button. When you click on the button, there is open a file window and you have to select one image file, after you selected it then it will appear in the drag area.
If you’re feeling difficult to understand what I’m saying then you can watch the demo video of this program or watch the full video tutorial and learn how it is actually created.
Video Tutorial of Drag & Drop or Browse – File upload Feature
In the video, you have seen how I create this drag & drop or browse file upload feature using only HTML CSS & JavaScript and I hope you have understood the basic codes behind creating this program. I tried to explain each JavaScript line comment so if you are a beginner then you can also easily create this type of file upload program after watching this video.
I can understand if you’re too beginner in this field then definitely you have difficulty understanding codes but don’t worry I have provided source files of this tutorial and you can easily download from the given download button. After downloading the source files of this drag & drop file upload program, just analyze codes and try changing some lines of codes to understand how it works.
You might like this:
Drag & Drop or Browse – File upload Feature [Source Codes]
To create this program [Drag & Drop or Browse – File upload Feature]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of this drag & drop file upload program from the given download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop or Browse: File Upload | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="drag-area">
<div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
<header>Drag & Drop to Upload File</header>
<span>OR</span>
<button>Browse File</button>
<input type="file" hidden>
</div>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5256ad;
}
.drag-area{
border: 2px dashed #fff;
height: 500px;
width: 700px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.drag-area.active{
border: 2px solid #fff;
}
.drag-area .icon{
font-size: 100px;
color: #fff;
}
.drag-area header{
font-size: 30px;
font-weight: 500;
color: #fff;
}
.drag-area span{
font-size: 25px;
font-weight: 500;
color: #fff;
margin: 10px 0 15px 0;
}
.drag-area button{
padding: 10px 25px;
font-size: 20px;
font-weight: 500;
border: none;
outline: none;
background: #fff;
color: #5256ad;
border-radius: 5px;
cursor: pointer;
}
.drag-area img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 5px;
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
//selecting all required elements
const dropArea = document.querySelector(".drag-area"),
dragText = dropArea.querySelector("header"),
button = dropArea.querySelector("button"),
input = dropArea.querySelector("input");
let file; //this is a global variable and we'll use it inside multiple functions
button.onclick = ()=>{
input.click(); //if user click on the button then the input also clicked
}
input.addEventListener("change", function(){
//getting user select file and [0] this means if user select multiple files then we'll select only the first one
file = this.files[0];
dropArea.classList.add("active");
showFile(); //calling function
});
//If user Drag File Over DropArea
dropArea.addEventListener("dragover", (event)=>{
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("active");
dragText.textContent = "Release to Upload File";
});
//If user leave dragged File from DropArea
dropArea.addEventListener("dragleave", ()=>{
dropArea.classList.remove("active");
dragText.textContent = "Drag & Drop to Upload File";
});
//If user drop File on DropArea
dropArea.addEventListener("drop", (event)=>{
event.preventDefault(); //preventing from default behaviour
//getting user select file and [0] this means if user select multiple files then we'll select only the first one
file = event.dataTransfer.files[0];
showFile(); //calling function
});
function showFile(){
let fileType = file.type; //getting selected file type
let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
if(validExtensions.includes(fileType)){ //if user selected file is an image file
let fileReader = new FileReader(); //creating new FileReader object
fileReader.onload = ()=>{
let fileURL = fileReader.result; //passing user file source in fileURL variable
// UNCOMMENT THIS BELOW LINE. I GOT AN ERROR WHILE UPLOADING THIS POST SO I COMMENTED IT
// let imgTag = `<img src="${fileURL}" alt="image">`; //creating an img tag and passing user selected file source inside src attribute
dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
}
fileReader.readAsDataURL(file);
}else{
alert("This is not an Image File!");
dropArea.classList.remove("active");
dragText.textContent = "Drag & Drop to Upload File";
}
}
That’s all, now you’ve successfully created a Drag & Drop or Browse – File upload Feature using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
if i want to upload a zip file is it works
Everything is doing well but after submitting the form I didn’t catch the file. Upload file value or field name is empty.
View this blog for file uploading: https://www.codingnepalweb.com/file-upload-with-progress-bar-html-javascript/
Can I specify where I want it to upload it to? and How?
Yes, you can specify the destination for a file upload. Read this blog: https://www.codingnepalweb.com/file-upload-with-progress-bar-html-javascript/
I don’t think the change event handler is ever used.
How to add more extensions like PDF, CSV document files.
Hey
What changes to do to only display the img name and not the image?
Files don’t reach the backend. Empty data is send
Thank you for the source code, it works perfectly.
Just want to ask what if user wants to add multiple files at once? Let me know thank you.
I’m thinking to make a separate video for it.
Hi There,
The box is ok. working but only one picture display and no save button, how can we upload multiple image at once or one by one in a row and save to stay on there.
Thanks
Hasan
After the page refreshes, how do you get the picture to stay?
let validExtensions = ["image/jpeg", "image/jpg", "image/png", "type/extension_here"]; add more types here
Ok I'll think on it
how to add more extensions like pdf document files etc
Hello Sir Plz Make A Video Or Write A Post Related Of Video Media Season Full Tutorial With Source Code