Drag and Drop html css javascript | upload files page project free source code
Hey friends, today we will see how to make this great drag and drop upload files page. The demo is available at the bottom of the page.
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.
Notes App Using Html Css Javascript
Now let’s see the codes!
HTML Codes
Paste the codes below:
<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>
The output would be:
Now let’s use CSS to style it.
CSS Codes
Paste the CSS Codes below:
@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
JavaScript Codes
//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";
}
}
The final output would be:
And that’s all for this project!
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Skill Bar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you !
In this post, we learn how to create a Skill Bar using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Html And Css Projects With Source Code
written by @codingporium
