FileUpload

document.addEventListener('alpine:init', () => {
  Alpine.data('attachmentUpload', () => ({
    uploadItems: [],
    files: new Map(),
    controllers: new Map(),
    statusLabels: {
      selected: 'Selected',
      uploading: 'Uploading',
      canceling: 'Canceling',
      success: 'Complete',
      error: 'Failed',
      canceled: 'Canceled',
    },

    updateAttempt(id, attemptId, statuses, update) {
      this.uploadItems = this.uploadItems.map((item) =>
        item.id === id && item.attemptId === attemptId && statuses.includes(item.status)
          ? update(item)
          : item,
      );
    },

    uploadProgress(event) {
      if (event.lengthComputable && event.total > 0) {
        return {
          kind: 'determinate',
          value: Math.min(100, Math.max(0, Math.round((event.loaded / event.total) * 100))),
        };
      }

      return { kind: 'indeterminate' };
    },

    beginUpload(file, id, attemptId) {
      const source = this.uploadItems.find((item) => item.id === id);
      const canStart =
        source &&
        (source.status === 'selected' ||
          source.status === 'canceled' ||
          (source.status === 'error' &&
            source.error.kind === 'transport' &&
            source.error.retryable));
      if (!canStart) {
        throw new Error(`Upload ${id} is not ready for a new attempt.`);
      }

      this.uploadItems = this.uploadItems.map((item) =>
        item.id === id
          ? {
              id: item.id,
              name: item.name,
              size: item.size,
              type: item.type,
              status: 'uploading',
              attemptId,
              progress: { kind: 'indeterminate' },
            }
          : item,
      );

      const controller = new AbortController();
      const request = new XMLHttpRequest();
      const abortRequest = () => request.abort();
      this.controllers.set(attemptId, controller);
      controller.signal.addEventListener('abort', abortRequest, { once: true });

      request.upload.addEventListener('progress', (event) => {
        this.updateAttempt(id, attemptId, ['uploading', 'canceling'], (item) => ({
          ...item,
          progress: this.uploadProgress(event),
        }));
      });
      request.addEventListener('load', () => {
        if (request.status >= 200 && request.status < 300) {
          this.updateAttempt(id, attemptId, ['uploading', 'canceling'], (item) => ({
            id: item.id,
            name: item.name,
            size: item.size,
            type: item.type,
            status: 'success',
            attemptId,
          }));
          return;
        }

        this.failUpload(id, attemptId, `The server rejected the upload (${request.status}).`);
      });
      request.addEventListener('error', () => {
        this.failUpload(id, attemptId, 'The upload could not reach the server.');
      });
      request.addEventListener('abort', () => {
        this.updateAttempt(id, attemptId, ['canceling'], (item) => ({
          id: item.id,
          name: item.name,
          size: item.size,
          type: item.type,
          status: 'canceled',
          attemptId,
        }));
      });
      request.addEventListener('loadend', () => {
        controller.signal.removeEventListener('abort', abortRequest);
        if (this.controllers.get(attemptId) === controller) {
          this.controllers.delete(attemptId);
        }
      });

      request.open('POST', '/api/uploads');
      request.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
      request.setRequestHeader('X-File-Name', encodeURIComponent(file.name));
      request.send(file);
    },

    failUpload(id, attemptId, message) {
      this.updateAttempt(id, attemptId, ['uploading', 'canceling'], (item) => ({
        id: item.id,
        name: item.name,
        size: item.size,
        type: item.type,
        status: 'error',
        attemptId,
        error: { kind: 'transport', message, retryable: true },
      }));
    },

    startUploads({ selections }) {
      this.uploadItems = [
        ...this.uploadItems,
        ...selections.map(({ proposedItem }) => proposedItem),
      ];

      for (const selection of selections) {
        if (typeof selection.proposedAttemptId !== 'string') continue;
        this.files.set(selection.id, selection.file);
        this.beginUpload(selection.file, selection.id, selection.proposedAttemptId);
      }
    },

    retryUpload({ id, proposedAttemptId }) {
      const file = this.files.get(id);
      if (!file) throw new Error(`No local File is available to retry upload ${id}.`);
      this.beginUpload(file, id, proposedAttemptId);
    },

    cancelUpload({ id, attemptId }) {
      const controller = this.controllers.get(attemptId);
      if (!controller) throw new Error(`No active transport exists for upload ${id}.`);
      this.updateAttempt(id, attemptId, ['uploading'], (item) => ({
        ...item,
        status: 'canceling',
      }));
      controller.abort();
    },

    removeUpload({ id }) {
      this.files.delete(id);
      this.uploadItems = this.uploadItems.filter((item) => item.id !== id);
    },
  }));
});

<form x-data="attachmentUpload" method="post" enctype="multipart/form-data">
  <div
    id="attachment-upload"
    class="lyra-upload"
    data-state="idle"
    x-data="lyraFileUpload({
      name: 'attachments[]',
      accept: 'image/*,.pdf',
      maxSizeMB: 10,
      multiple: true
    })"
    x-modelable="items"
    x-model="uploadItems"
    @lyra:file-upload:select="startUploads($event.detail)"
    @lyra:file-upload:retry="retryUpload($event.detail)"
    @lyra:file-upload:cancel="cancelUpload($event.detail)"
    @lyra:file-upload:remove="removeUpload($event.detail)"
  >
    <label class="lyra-upload__zone" for="attachment-upload-input" x-bind="zone">
      <span class="lyra-upload__zone-icon" aria-hidden="true"></span>
      <span class="lyra-upload__zone-label">Choose attachments</span>
      <span class="lyra-upload__zone-hint">Images or PDF, up to 10 MB each</span>
    </label>
    <input
      id="attachment-upload-input"
      class="lyra-upload__input"
      type="file"
      name="attachments[]"
      accept="image/*,.pdf"
      multiple
      x-bind="input"
    />

    <ul class="lyra-upload__list">
      <template x-for="item in items" :key="item.id">
        <li class="lyra-upload__item" x-bind="itemBindings(item)">
          <span class="lyra-upload__item-body">
            <span class="lyra-upload__item-row">
              <span class="lyra-upload__item-name" x-text="item.name"></span>
              <span
                class="lyra-upload__item-meta"
                x-text="item.status === 'error' ? item.error.message : statusLabels[item.status]"
              ></span>
            </span>
            <template x-if="item.status === 'uploading' || item.status === 'canceling'">
              <progress class="lyra-upload__bar" x-bind="progressBindings(item)"></progress>
            </template>
          </span>

          <template x-if="item.status === 'uploading'">
            <button class="lyra-upload__cancel" x-bind="actionBindings('cancel', item)">
              Cancel
            </button>
          </template>
          <template
            x-if="item.status === 'canceled' || (item.status === 'error' && item.error.retryable)"
          >
            <button class="lyra-upload__retry" x-bind="actionBindings('retry', item)">Retry</button>
          </template>
          <template
            x-if="item.status === 'selected' || item.status === 'success' || item.status === 'canceled' || item.status === 'error'"
          >
            <button class="lyra-upload__remove" x-bind="actionBindings('remove', item)">
              Remove
            </button>
          </template>
        </li>
      </template>
    </ul>

    <span
      class="lyra-upload__live lyra-visually-hidden"
      aria-live="polite"
      aria-atomic="true"
      x-bind="liveRegion"
    ></span>
  </div>

  <button type="submit">Submit</button>
</form>