Alpine.js x-bound: Bind Files

by rameel

HTML

<div x-data="{ 
  files: [], 
  clear() {
    // null, undefined, or [] does not work
    this.files = new DataTransfer().files;
  }}">

  <label>
    Upload a picture:
    <input accept="image/png, image/jpeg" &files type="file" />
  </label>

  <label>
    Upload multiple files of any type:
    <input &files type="file" multiple />
  </label>

  <p>
    <button @click="clear">Clear</button>
  </p>

  <div>
    <h3>Selected files:</h3>
    <ol>
      <template x-for="f in files">
        <li x-format>{{ f.name }} ({{ f.size }} bytes)</li>
      </template>
    </ol>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-bound@1/alpinegear-bound.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

div[x-data] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}