alpine-image-uploader

Component Alpine.js untuk upload dan preview gambar serta dokumen.

Contoh Penggunaan

<div x-data="imageUploader()" class="p-4 max-w-4xl mx-auto">

  <input type="file" multiple x-ref="fileInput" @change="previewImages($event)" class="hidden">

  <template x-if="images.length > 0">
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>Preview File</th>
          <th>Keterangan</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(image, index) in images" :key="index">
          <tr>
            <td>
              <img
                x-show="image.type === 'image'"
                :src="image.url"
                alt="Preview"
                style="width:50px; height:50px; object-fit:cover; border:1px solid #ccc; border-radius:4px;"
              />
              <div
                x-show="image.type !== 'image'"
                x-html="icons[image.type] || icons.other"
                style="width:50px; height:50px;"
              ></div>
            </td>
            <td>
              <input type="text" placeholder="Tambahkan keterangan" x-model="image.keterangan" />
            </td>
            <td>
              <button @click="removeImage(index)" style="background:#e53e3e; color:white; padding:5px 10px; border:none; border-radius:4px;">Hapus</button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </template>

  <template x-if="images.length > 0">
    <div class="mt-4">
      <button @click="$refs.fileInput.click()">Tambah file</button>
      <button @click="uploadAll()">Upload</button>
    </div>
  </template>
</div>