JavaScript Academy · Pelajaran

Menyeret File ke Halaman

Tangani file yang dilepaskan dari desktop.

Menyeret File ke Halaman adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Berkas dari Komputer

Selain memindahkan elemen, API Seret dan Lepas memungkinkan pengguna menyeret berkas dari sistem operasi ke halaman Anda — dasar untuk zona pelepasan unggahan.

Menerima Pelepasan Berkas

Penyiapannya serupa dengan pelepasan elemen: cegah perilaku bawaan pada dragover dan drop. Perbedaannya adalah Anda membaca berkas, bukan menggunakan getData.

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

Saat pelepasan terjadi, e.dataTransfer.files adalah FileList yang berisi objek File yang dilepaskan.

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

Melakukan Iterasi pada Berkas

FileList menyerupai larik. Konversikan dengan operator sebar agar dapat melakukan iterasi menggunakan metode larik.

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

Metadata Berkas

Setiap File menyediakan name, size (bita), type (MIME), dan lastModified tanpa membaca isinya.

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

Memfilter berdasarkan Jenis

Validasi berkas yang dilepaskan sebelum memprosesnya — misalnya, terima hanya gambar.

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

Membaca Isi Berkas

Gunakan FileReader untuk membaca berkas. Gunakan readAsText untuk teks dan readAsDataURL untuk pratinjau.

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

Mempratinjau Gambar yang Dilepaskan

URL.createObjectURL(file) memberikan URL pratinjau secara instan tanpa membaca seluruh berkas. Cabut URL tersebut setelah selesai untuk membebaskan memori.

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

items vs files

dataTransfer.items lebih kaya daripada files: setiap DataTransferItem melaporkan kind ("file" atau "string") dan dapat menghasilkan berkas atau entri direktori.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

Mengunggah Berkas yang Dilepaskan

Bungkus berkas dalam FormData, lalu POST berkas tersebut ke peladen Anda.

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

Mencegah Navigasi yang Tidak Disengaja

Jika berkas dilepaskan di luar zona Anda, peramban akan menavigasi ke berkas tersebut. Lindungi seluruh dokumen untuk mencegahnya.

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

Pemeriksaan Singkat

Uji pelepasan berkas.

Rangkuman: Menyeret Berkas

Anda membuat zona pelepasan berkas, membaca dataTransfer.files, memeriksa metadata, memfilter berdasarkan jenis, mempratinjau gambar dengan URL objek, menggunakan FileReader, mengunggah dengan FormData, dan mencegah navigasi yang tidak disengaja. Bagian Seret dan Lepas telah selesai.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyeret File ke Halaman” gratis?

Ya — teks lengkap “Menyeret File ke Halaman” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyeret File ke Halaman”?

Tangani file yang dilepaskan dari desktop. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Menyeret File ke Halaman” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy