How To Get a List of File Names in a Directory

Dengan menggunakan PHP tentunya ada banyak cara untuk melakukan hal serupa dengan mudah, tapi kali ini kita akan menggunakan javascript.

Sebelum membaca lebih lanjut, perlu diketahui bahwa metode ini hanya berlaku pada hosting Apache.

Get Request

Misalnya, kita mempunyai struktur direktori seperti berikut:

|-- buah/
|   |-- apel.jpg
|   |-- jambu.svg
|   `-- jeruk.png

Lalu kita buat get request sebagai berikut:

function koleksiBuah() {
  return new Promise((resolve, reject) => {
    const fileNames = [];
    $.get('buah/', (data) => {
      $(data).find('td > a').each(function () {
        const namaFile = $(this).attr('href');
        if (saring(namaFile))
          fileNames.push(namaFile);
      });
    }).done(() => {
      resolve(fileNames);
    });
  });
}

Filtering

Misalnya kita hanya ingin membuat array yang berisi nama file dengan extention .jpg dan .png, maka kita bisa menggunakan kode berikut:

function saring(file) {
  const extension = file.substr((file.lastIndexOf('.') + 1))
  switch (extension) {
    case 'jpg':
    case 'png':
      // case "gif": // penambahan filter dapat dilakukan di sini
      return true;
    default:
      return false;
  }
}

Main Function

Karena fungsi $.get() memerlukan waktu untuk membaca direktori dan isinya, maka kita perlu menggunakan assynchronous function seperti berikut:

async function daftarBuah() {
  const fileNames = await koleksiBuah();
  console.log(fileNames);
}

Setelah mempersiapkan semua kode di atas, kita tinggal execute fungsi berikut:

daftarBuah();

Kemudian buka Developer Tools pada web browser dan periksa tab Console, seharusnya akan muncul log seperti berikut:

(2) ["apel.jpg", "jeruk.png"]

Use Case

Misalnya kita punya element <div id="container"></div> yang akan kita isi dengan list nama file dari direktori di atas. Maka kita dapat modifikasi kode seperti berikut:

async function daftarBuah() {
  const fileNames = await koleksiBuah();
  $('#container').append('<ul></ul>');
  $(fileNames).each(function () {
    $('#container ul').append(`<li>${this}</li>`);
  });
}

daftarBuah();

Setelah menjalankan kode di atas, maka isi #container akan menjadi sebagai berikut:

<div id="container">
  <ul>
    <li>apel.jpg</li>
    <li>jeruk.png</li>
  </ul>
</div>

Credit

Image by Pexelsfrom Pixabay