WEB FILE API

Web File API adalah sebuah teknologi yang memungkinkan web aplikasi untuk berinteraksi dengan file yang disimpan di komputer pengguna. Info ini menjelaskan bagaimana cara menggunakan File API dalam JavaScript untuk memanipulasi file di mesin lokal.

Apa itu Web File API?

Web File API adalah standar yang ditetapkan oleh World Wide Web Consortium (W3C) yang memungkinkan web aplikasi untuk membaca dan menulis file di komputer pengguna. Dengan API ini, kamu bisa memanipulasi file tanpa perlu server, yang mempercepat proses dan menambah fungsionalitas.

Fungsi Utama dari Web File API

Web File API memiliki tiga fungsi utama:

1. Membaca file dari sistem file pengguna.
2. Membuat url yang mengacu pada bagian spesifik dari file.
3. Mengakses informasi tentang file, seperti tipe dan ukuran.

Berikut adalah cara untuk menggunakan fungsionalitas tersebut.

Membaca File dari Sistem File

Web File API menyediakan objek FileReader yang dapat digunakan untuk membaca data dari file. Gunakan metode readAsText() untuk membaca file sebagai teks, atau readAsDataURL() untuk membaca file sebagai data URL.

var input = document.querySelector('input[type="file"]');

input.onchange = function () {
  var file = input.files[0];

  var reader = new FileReader();
  reader.onload = function () {
    console.log(reader.result);
  };

  reader.readAsText(file);
};

Membuat URL yang Mengacu pada Bagian Spesifik dari file

Objek URL menyediakan metode createObjectURL() yang dapat digunakan untuk membuat URL yang mengacu pada objek File. URL ini dapat digunakan dalam elemen HTML seperti img atau link untuk merujuk pada isi file.

var file = /* file object */;
var url = URL.createObjectURL(file);

var image = document.createElement('img');
image.src = url;
document.body.appendChild(image);

Mengakses Informasi Tentang File

Objek File merupakan sebuah turunan dari Blob dan memiliki properties seperti name, lastModified, dan size, yang dapat digunakan untuk mendapatkan informasi tentang file.

var file = /* file object */

console.log('Name: ', file.name);
console.log('Last Modified: ', new Date(file.lastModified));
console.log('Size: ', file.size);

Dengan pemahaman tentang Web File API JavaScript, kamu sekarang bisa menerapkannya untuk membaca, menulis, dan berinteraksi dengan file dengan lebih efektif.