Seret dan lepas unggahan file menggunakan javascript

Hai teman-teman, hari ini di blog ini Anda akan belajar cara membuat Drag & Drop atau Browse – Fitur unggah file menggunakan HTML CSS & JavaScript. Di blog sebelumnya, saya juga telah membagikan cara mengunggah gambar dengan mengklik tombol browse tetapi sekarang di blog ini, saya akan mengajari Anda cara mengunggah file gambar dengan cara drag & drop atau dengan mengklik tombol browse file

Table of Contents Show

Video Tutorial Tarik & Lepas atau Telusuri – Fitur Unggah File
Anda mungkin menyukai ini
Seret & Jatuhkan atau Telusuri – Fitur Unggah File [Kode Sumber]
Bagaimana cara membuat unggahan file seret dan lepas dalam JavaScript?
Bagaimana cara mengunggah file menggunakan drag and drop?
Bagaimana cara mengunggah file dalam JavaScript?
Bagaimana cara menyeret dan melepaskan file dalam HTML?

Upload file Drag and Drop berarti Anda dapat mengupload file dengan cara drag & drop. Antarmuka Seret dan Lepas mengizinkan aplikasi web untuk menarik dan melepas file di halaman web. Anda mungkin pernah melihat jenis fitur pengunggahan file ini di sebagian besar situs. Ada banyak library JavaScript untuk membuat fitur upload file drag & drop dengan beberapa baris kode JavaScript, tetapi hari ini di blog ini saya akan membuatnya dengan JavaScript murni tanpa menggunakan library apapun.

Dalam program ini [Drag & Drop or Browse – File upload Feature], di halaman web, terdapat wadah drop area dengan beberapa teks, ikon, dan tombol browse file. Saat Anda menyeret file gambar apa pun ke area seret, batas wadah juga berubah menjadi solid, dan teks "Seret & Jatuhkan untuk mengunggah file" juga berubah menjadi "Lepaskan untuk mengunggah file"

Saat Anda melepaskan file gambar Anda di area seret, pratinjau gambar itu akan segera muncul. Anda juga dapat mengunggah gambar dengan mengklik tombol browse file. Ketika Anda mengklik tombol, ada jendela file yang terbuka dan Anda harus memilih satu file gambar, setelah Anda memilihnya maka akan muncul di area drag

Jika Anda merasa sulit untuk memahami apa yang saya katakan maka Anda dapat menonton video demo dari program ini atau menonton video tutorial lengkap dan mempelajari bagaimana program ini sebenarnya dibuat

Video Tutorial Tarik & Lepas atau Telusuri – Fitur Unggah File

Di dalam video, Anda telah melihat bagaimana saya membuat fitur drag & drop atau browse file upload hanya menggunakan HTML CSS & JavaScript dan saya harap Anda telah memahami kode dasar di balik pembuatan program ini. Saya mencoba menjelaskan setiap komentar baris JavaScript jadi jika Anda seorang pemula maka Anda juga dapat dengan mudah membuat program pengunggahan file jenis ini setelah menonton video ini

Saya bisa mengerti jika Anda terlalu pemula di bidang ini maka pasti Anda kesulitan memahami kode tetapi jangan khawatir saya telah menyediakan file sumber tutorial ini dan Anda dapat dengan mudah mengunduh dari tombol unduh yang diberikan. Setelah mendownload file sumber program upload file drag & drop ini, cukup analisis kode dan coba ubah beberapa baris kode untuk memahami cara kerjanya

Anda mungkin menyukai ini

Permainan JavaScript Tic Tac Toe
Pratinjau File Gambar Sebelum Diupload
Lightbox Gambar Responsif dalam JavaScript
Cara Mengunggah, Pratinjau & Unduh Gambar

Seret & Jatuhkan atau Telusuri – Fitur Unggah File [Kode Sumber]

Untuk membuat program ini [Drag & Drop or Browse – File upload Feature]. Pertama, Anda perlu membuat tiga file, File HTML, File CSS, dan File JavaScript. Setelah membuat file-file ini cukup rekatkan kode berikut ke dalam file Anda. Anda juga dapat mendownload file kode sumber dari program upload file drag & drop ini dari tombol download yang diberikan

Pertama, buat file HTML dengan nama index. html dan rekatkan kode yang diberikan di file HTML Anda. Ingat, Anda harus membuat file dengan. ekstensi html

<!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>

Kedua, buat file CSS dengan nama style. css dan rekatkan kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan. ekstensi css

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];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;
}

Terakhir, buat file JavaScript dengan nama script. js dan rekatkan kode yang diberikan di file JavaScript Anda. Ingat, Anda harus membuat file dengan. ekstensi js

//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";
  }
}

Itu saja, sekarang Anda telah berhasil membuat Drag & Drop atau Browse – Fitur upload file menggunakan HTML CSS & JavaScript. Jika kode Anda tidak berfungsi atau Anda menghadapi kesalahan/masalah apa pun, silakan unduh file kode sumber dari tombol unduh yang diberikan. Gratis dan a. zip akan diunduh kemudian Anda harus mengekstraknya

Bagaimana cara membuat unggahan file seret dan lepas dalam JavaScript?

Bagaimana cara kerja seret dan lepas? .

Pindahkan penunjuk ke objek (gambar, file, dll. )

Tekan, dan tahan, tombol pada mouse atau alat penunjuk lainnya, untuk “mengambil” objek

"Seret" objek ke lokasi yang diinginkan dengan menggerakkan penunjuk ke lokasi ini

"Jatuhkan" objek dengan melepaskan tombol

Bagaimana cara mengunggah file menggunakan drag and drop?

Unggahan file dengan tarik lalu lepas terjadi saat Anda menyeret satu atau beberapa file dari pengelola file platform dasar dan melepaskannya ke halaman web untuk diunggah. A preview of the image indicates the upload has begun. Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of code.