Browser menyediakan API bernama File
File adalah object yang merupakan turunan dari object Blob, didalamnya terdapat 3 properti:
name (mengembalikan String)lastModified (mengembalikan UNIX Timestamp – terakhir kali file dimodifikasi)
Serta 1 properti lainnya adalah object Blob berisi 2 properti :
size (ukuran dalam bytes)type (MIME type-nya)
Kamu bisa memperoleh object File saat berinteraksi dengan objek FileList, yang mana FileList ini bisa kamu dapatkan ketika mengambil data dari elemen <input type="file" /> pada Formulir HTML, atau saat operasi Drag and Drop dilakukan.
Ketika kamu memperoleh sebuah object FileList dan melakukan looping atau memilih langsung sebuah elemen (misalnya, item pertama yaitu files[0]) didapatlah sebuah object File .
Let’s say , kamu punya input elemen ber type="file" disebuah form:
<input type="file" />Kita biasa membuat event listener change , karena kita menginginkan object nya ketika terjadi “perubahan isian input” pada elemen tersebut, tepat setelah kamu pilih suatu file.
Didalam block event listener tersebut, panggil document.querySelector('input').files , ia mengembalikan suatu object FileList , object ini berisi array terdiri dari sekumpulan File dalamnya, karena kita fokus terhadap satu object file dan yang kita akses adalah array, kamu perlu melakukan seperti yang penulis jelaskan tadi, menggunakan [0]untuk mengakses satu file.
Dengan begitu kita dapat mengakses semua properti yang diperlukan dari File object:
document.querySelector('input').addEventListener('change', () => {
const file = document.querySelector('input').files[0]
alert(
`file ${file.name} terakhir kali dimodifikasi ${new Date(
file.lastModified,
).toDateString()}`,
)
})Kamu bisa praktikan ini di codepen. Jika kesulitan, saya sediakan demonya disini.