Pertanyaan
Aplikasi web desktop mengimpor berkas berukuran besar. Pengguna dapat mengeklik untuk memilih berkas, menyeret berkas ke drop zone, atau menggunakan peramban yang mendukung showOpenFilePicker(). Rancang alur frontend lengkap, termasuk deteksi fitur, fallback, pembatalan, progres, aksesibilitas, privasi, dan percobaan ulang (retry). Jelaskan kapabilitas mana saja yang merupakan peningkatan (enhancement) alih-alih dependensi dasar.
Referensi jawaban
Gunakan satu model input: File atau handle berkas yang dapat dibaca. UI hanya boleh menerima kandidat berkas, sumber, ukuran, tipe, dan status. Fondasi dasarnya adalah <input type="file"> yang terlihat dan berlabel karena tersedia secara luas; drag-and-drop adalah cara lain untuk menghasilkan model yang sama. Jika window.showOpenFilePicker ada dalam konteks yang aman (secure context), gunakan ini hanya dari penangan klik pengguna (user-click handler) sebagai peningkatan. Jika pemilih (picker) gagal, dibatalkan, atau izin ditolak, tetap sediakan jalur input alih-alih menganggap pengecualian tersebut sebagai ketiadaan dukungan.
Modelkan alurnya sebagai idle → selected → validating → reading → uploading → complete, dengan cabang cancelled dan failed. Validasi ekstensi, MIME yang dideklarasikan, batas ukuran sebenarnya, dan format bisnis; pemeriksaan klien memberikan umpan balik cepat, sementara server harus memvalidasi ulang. Baca berkas besar sebagai stream atau slice, batalkan pembacaan dan pengunggahan dengan AbortController, coba ulang hanya potongan (chunk) yang dapat diputar ulang, serta tampilkan bita yang selesai beserta estimasinya.
Nama, jalur, dan konten adalah data pengguna. Tampilkan hanya metadata yang diperlukan dan jangan sertakan konten dalam log; cabut URL objek pratinjau dengan URL.revokeObjectURL(). Drop zone memerlukan jalur keyboard dan tombol biasa, dengan fokus, kesalahan, dan progres yang diekspos melalui elemen semantik dan live region. Menyeret tidak boleh menjadi satu-satunya operasi. Beri tahu pengguna kapan data akan diunggah, lalu bersihkan referensi lokal dan pekerjaan yang belum selesai setelah pembatalan.
Hambatan utama
showOpenFilePicker() memerlukan aktivasi pengguna sementara (transient user activation), sehingga tidak dapat dipanggil dari timer, pemuatan halaman, atau tugas latar belakang yang tertunda. API ini mengembalikan handle, yang tidak menyiratkan izin baca permanen. Deteksi fitur tidak menjamin izin. accept pada input hanyalah sebuah petunjuk (hint), bukan pemeriksaan keamanan, dan File.type mungkin kosong atau disediakan oleh klien. Drop handler harus mencegah navigasi bawaan dan menangani direktori, banyak berkas, serta daftar yang sangat besar.
Kesalahan umum
- Menganggap File System Access API sebagai dependensi dasar.
- Memercayai ekstensi atau nilai MIME sebagai validasi keamanan berkas.
- Menyembunyikan input tanpa mempertahankan label, jalur keyboard, dan jalur pembaca layar (screen reader).
- Membaca seluruh berkas besar ke dalam memori sebelum mengunggah.
- Menampilkan "izin ditolak" untuk pembatalan, kesalahan format, dan kegagalan jaringan secara seragam.
Analisis trade-off
Input adalah fondasi dasar yang dapat diandalkan dengan jangkauan terluas, tetapi tidak memiliki operasi tingkat handle. Picker dapat mengurangi pemilihan berulang dan mengekspos operasi handle yang lebih kaya, namun bergantung pada dukungan peramban, HTTPS, aktivasi pengguna, dan izin. Drag-and-drop meningkatkan throughput desktop tetapi membutuhkan alternatif keyboard. Validasi klien mempersingkat waktu umpan balik; validasi server adalah batas keamanan. Pemotongan (chunking) dan kemampuan melanjutkan (resumability) menambah kompleksitas status tetapi mengurangi biaya percobaan ulang transfer data besar.
Contoh yang dapat dijalankan
async function chooseFiles(input) {
if (window.showOpenFilePicker && window.isSecureContext) {
try {
const handles = await window.showOpenFilePicker({ multiple: true });
return Promise.all(handles.map((handle) => handle.getFile()));
} catch (error) {
if (error?.name !== "AbortError") throw error;
}
}
return Array.from(input.files ?? []);
}Panggil ini dari user-click handler. Kode produksi juga harus membatasi tipe, jumlah, dan ukuran serta memetakan kegagalan ke status yang dihadapi pengguna. Drop handler dapat mengonversi event.dataTransfer.files ke array yang sama dan menggunakan kembali state machine validasi dan pengunggahan.
Pertanyaan lanjutan pewawancara
Mengapa tidak memanggil showOpenFilePicker() saat pemuatan halaman? API memerlukan aktivasi pengguna sementara, sehingga panggilan yang tertunda atau di latar belakang dapat ditolak. Apakah accept menghentikan malware? Tidak. Itu adalah petunjuk picker; pemeriksaan keamanan berada di server. Mengapa mempertahankan fallback? Dukungan peramban dan izin dapat bervariasi, sehingga fondasi dasar harus berfungsi dengan input yang tersedia secara luas.
Tanggapan lanjutan
Bagaimana Anda menguji jalur fallback?
Uji peramban yang tidak didukung, non-secure context, pembatalan, dan izin yang ditolak secara terpisah; pastikan bahwa jalur input masih dapat menyelesaikan impor.
Bagaimana Anda mencegah kehabisan memori?
Gunakan File.slice() atau stream, batasi konkurensi, unggah potongan (chunk), dan batalkan pengontrol saat pengguna membatalkan proses.
Bagaimana Anda membuat alur ini aksesibel?
Pertahankan label dan tombol yang sebenarnya, buat drop zone dapat menerima fokus (focusable), biarkan keyboard memicu input, dan kaitkan kesalahan serta progres dengan teks dan live region.
Metrik mana yang menunjukkan bahwa alur ini berfungsi?
Lacak tingkat keberhasilan, pembatalan, kegagalan validasi, penyelesaian akhir setelah percobaan ulang, waktu hingga progres pertama, dan tingkat fallback berdasarkan peramban tanpa merekam konten berkas.