Telegram Group Join Now
ADVERTISEMENT
Drag and Drop File Upload Using HTML,CSS & JavaScript

Hey friends, today we will see how to make this great drag and drop File Upload Using Html, Css, and JavaScript. We create this drag and drop using JavaScript and Html and Css uses for creating project structure. The demo is available at the bottom of the page.
ADVERTISEMENT
ADVERTISEMENT
Now let’s see the general use of this project. Sometimes you may want to collect file inputs from your website user. So this project is a nice page for users to upload files and they can also drag and drop files on this page.
Code by | codingporium |
Project Download | Link Available Below |
Language used | HTML,CSS and JavaScript |
External link / Dependencies | Yes |
Responsive | Yes |
Build A Notes App Using HTML ,CSS & Javascript
ADVERTISEMENT
Now let’s see the codes!
ADVERTISEMENT
HTML Code For Drag and Drop File Upload
Paste the codes below:
NOTE: this is Font Awesome CDN link so don’t forget to link in your html head section otherwise this drag and drop icon not show in your projects.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
HTML CODE
ADVERTISEMENT
<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>
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
The output would be:

Now let’s use CSS to style it.
ADVERTISEMENT
CSS Code For Drag and Drop File Upload
Paste the CSS Codes below:
ADVERTISEMENT
@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: #0fb8ac; } .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: #0fb8ac; border-radius: 5px; cursor: pointer; } .drag-area img{ height: 100%; width: 100%; object-fit: cover; border-radius: 5px; }
Now we add JavaScript for functionality
50+ HTML, CSS & JavaScript Projects With Source Code
JavaScript Code For Drag and Drop File Upload
//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 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"; } }
Final Output Of Drag and Drop File Upload

And that’s all for this project!
Now we have completed our Drag and Drop File Upload. Here is our updated output with JavaScript. I hope you like the Drag and Drop File Upload. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
ADVERTISEMENT
In this post, we learn how to create a Drag and Drop File Upload Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
ADVERTISEMENT
Portfolio Website using HTML and CSS (Source Code)
ADVERTISEMENT
written by @codingporium
ADVERTISEMENT
Which code editor do you use for this Drag and Drop File Upload coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
ADVERTISEMENT