Tarik lalu lepas folder ke Chrome kini tersedia

Eiji Kitamura

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

Meneruskan beberapa file dengan tarik lalu lepas

Mari kita lihat contoh kode 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 satu atau beberapa file dari desktop ke browser, tetapi saat mencoba meneruskan folder, perhatikan bahwa folder tersebut akan ditolak atau diperlakukan sebagai objek File yang menyebabkan kegagalan.

Cara menangani folder yang dihapus

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

<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 dijatuhkan sebagai Entry (FileEntry atau DirectoryEntry) dengan menggunakan fungsi baru yang disebut 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 dijatuhkan adalah file atau direktori dengan memeriksa kolom .isFile (atau .isDirectory).

Untuk informasi lebih lanjut tentang FileSystem API, baca Menjelajahi FileSystem API, terkait kemampuan tarik lalu lepas baru, baca dokumen ini. Tentu saja, fitur ini adalah standar terbuka atau akan segera menjadi standar terbuka.