Drag And Drop Image Preview Javascript

5 min read Jun 22, 2024

Drag and Drop Image Preview dengan JavaScript

Membuat preview gambar saat pengguna menyeret dan menjatuhkan (drag and drop) file gambar adalah fitur umum pada website modern. Fitur ini memudahkan pengguna untuk memilih gambar dan melihat hasilnya sebelum diunggah. Pada artikel ini, kita akan mempelajari cara membuat preview gambar dengan drag and drop menggunakan JavaScript.

HTML Struktur

Pertama, kita perlu membuat struktur HTML yang akan digunakan. Kita memerlukan sebuah elemen untuk area drop dan elemen untuk menampilkan preview gambar.




  Drag and Drop Image Preview
  



  
    Seret dan jatuhkan gambar di sini

Pada kode HTML di atas:

drop-area adalah elemen tempat pengguna menyeret dan menjatuhkan gambar.
preview adalah elemen yang akan menampilkan preview gambar.

JavaScript

Selanjutnya, kita perlu menambahkan JavaScript untuk menangani event drag and drop dan menampilkan preview gambar. Berikut adalah contoh kode JavaScript:

const dropArea = document.querySelector('.drop-area');
const preview = document.querySelector('.preview');

dropArea.addEventListener('dragover', (event) => {
  event.preventDefault();
  dropArea.classList.add('over');
});

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('over');
});

dropArea.addEventListener('drop', (event) => {
  event.preventDefault();
  dropArea.classList.remove('over');

  const file = event.dataTransfer.files[0];

  if (file.type.startsWith('image/')) {
    const reader = new FileReader();

    reader.onload = (event) => {
      preview.style.display = 'block';
      preview.innerHTML = ``;
    };

    reader.readAsDataURL(file);
  } else {
    alert('Harap pilih file gambar!');
  }
});

Kode JavaScript di atas melakukan hal berikut:

Menangkap event drag dan drop:
- dragover: Digunakan untuk mencegah browser melakukan tindakan default saat file diseret di atas area drop.
- dragleave: Digunakan untuk menghapus kelas over dari drop-area ketika file keluar dari area drop.
- drop: Digunakan untuk menangani event saat file dijatuhkan di area drop.
Memvalidasi jenis file:
- Memeriksa apakah file yang dijatuhkan adalah file gambar dengan memeriksa file.type.
Membaca file dengan FileReader:
- Jika file adalah gambar, FileReader digunakan untuk membaca file sebagai data URL.
Menampilkan preview gambar:
- Setelah data URL didapatkan, preview gambar ditampilkan di elemen preview.

Penjelasan Lebih Lanjut

event.preventDefault(): Fungsi ini digunakan untuk mencegah tindakan default browser. Dalam kasus ini, kita ingin mencegah browser membuka file yang dijatuhkan secara langsung.

event.dataTransfer.files: Properti ini berisi daftar file yang dijatuhkan oleh pengguna. Dalam kode di atas, kita mengambil file pertama dari daftar ini.

FileReader: Objek FileReader digunakan untuk membaca konten file secara asynchronous. Metode readAsDataURL() akan membaca file dan mengonversi kontennya menjadi data URL yang kemudian dapat digunakan sebagai sumber gambar.

preview.style.display = 'block';: Menampilkan elemen preview yang sebelumnya disembunyikan.

preview.innerHTML = <img src="${event.target.result}">;: Menambahkan tag gambar (<img>) ke elemen preview dengan sumber gambar dari data URL yang didapatkan dari FileReader.

Kesimpulan

Dengan menggunakan kode HTML dan JavaScript di atas, kita dapat membuat preview gambar dengan drag and drop yang sederhana. Anda dapat memodifikasi kode ini sesuai kebutuhan, seperti menambahkan validasi tambahan untuk jenis file, ukuran file, atau menambahkan event listener lain untuk menambahkan fungsionalitas lainnya.