Tarik lalu lepas folder ke Chrome kini tersedia

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Seiring berkembangnya aplikasi web, Anda mungkin merasa praktis untuk mengizinkan pengguna menarik lalu melepas file dari desktop ke browser untuk mengedit, mengupload, berbagi, dll. Namun sayangnya, kami tidak dapat menarik lalu melepas folder ke halaman web. Untungnya, mulai Chrome 21, masalah ini akan diatasi (sudah tersedia di saluran Chrome dev).

Meneruskan beberapa file dengan tarik lalu lepas

Mari kita lihat contoh kode dari tarik lalu lepas yang ada.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

Dalam contoh ini, Anda sebenarnya dapat menarik lalu melepas file atau file dari desktop ke browser. Namun, saat mencoba meneruskan folder, perhatikan bahwa folder tersebut akan ditolak atau diperlakukan sebagai objek File yang mengakibatkan kegagalan.

Cara menangani folder yang hilang

Chrome 21 memungkinkan Anda melepaskan folder atau beberapa folder ke jendela browser. Untuk menangani hal ini, Anda perlu mengubah cara menangani objek yang dilepas.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

Perhatikan bahwa perbedaan besar di sini adalah Anda dapat memperlakukan objek yang dilepas sebagai Entry (FileEntry atau DirectoryEntry) menggunakan fungsi baru bernama getAsEntry (webkitGetAsEntry). Setelah mendapatkan akses ke objek Entry, Anda dapat menggunakan metode penanganan file standar yang diperkenalkan dalam spesifikasi FileSystem API. Misalnya, contoh ini menunjukkan cara mendeteksi apakah objek yang dilepaskan adalah file atau direktori dengan memeriksa kolom .isFile (atau .isDirectory).

Untuk informasi selengkapnya mengenai API FileSystem, baca Menjelajahi API FileSystem terkait kemampuan tarik lalu lepas yang baru, baca dokumen ini. Tentu saja, fitur ini adalah standar terbuka atau sedang menunggu untuk menjadi salah satu fitur yang akan segera hadir.