Membuat File Upload Drag & Drop Dengan Html Css Dan Javascript
Hallo semuanya, hari ini kita akan belajar cara membuat fitur Drag & Drop Upload File menggunakan Html Css dan Javascript.
drag and drop upload file artinya anda bisa mengupload File dengan cara drag & drop pada antarmuka di halaman web, anda mungkin pernah melihat Fitur unggah file jenis ini di sebagian situs web, ada banyak perpustakaan untuk membuat fitur ini , tetapi disini saya akan membuat dengan javascript murni tanpa menggunakan perpustakaan apapun.
Pada program ini terdapat wadah drop area dengan beberapa Teks, Icon dan tombol browser file, saat anda menyeret file gambar ke area, batas penampung juga berubah menjadi solid.
jika anda merasa sulit memahami apa yang saya katakan monmaap ni yaaa :D
Ok saya dapat mengerti jika anda terlalu pemula di bidang ini maka pasti akan kesulitan memahami kode ini, tapi jangan khawatir anda dapat dengan mudah mengunduh kode sumbernya yang sudah saya sediakan di bawah , ataupun meng-copy codenya .
Untuk membuat program ini anda perlu membuat tiga buah file, File Html Css dan Javascript , setelah selesai salin kode di bawah ini pada file kalian.
<!DOCTYPE html>
<!-- Created By Desaincode - www.desaincod3.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 | Desaincode</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</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="main.js"></script>
</body>
</html>
@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: #577ee8;
}
.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;
}
//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="">`; //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";
}
}
Selesai, dan lihat hasilnya
Belum ada Komentar
Posting Komentar