File Upload

<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from "vue";
import { AttachmentUpload, type AttachmentUploadItem } from "@/components/orvui/blocks/file-upload";
const items = ref<AttachmentUploadItem[]>([
  {
    id: "brief",
    name: "launch-brief.pdf",
    kind: "file",
    size: 32400000,
    href: "data:application/pdf,orvui%20launch%20brief",
    status: "failed",
    error: "Upload failed",
  },
  {
    id: "flowers",
    name: "orange-flowers.jpg",
    kind: "image",
    size: 9800000,
    previewUrl:
      "https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=1200&q=85",
  },
  {
    id: "voice-note",
    name: "launch-note.m4a",
    kind: "audio",
    currentTime: 12,
    duration: 48,
  },
]);
const playing = ref<string>(),
  jobs = new Set<ReturnType<typeof setTimeout>>();
let clock: ReturnType<typeof setInterval> | undefined;
watch(playing, (id) => {
  clearInterval(clock);
  if (id)
    clock = setInterval(() => {
      items.value = items.value.map((item) =>
        item.id === id && item.duration
          ? {
              ...item,
              currentTime: Math.min(item.duration, (item.currentTime ?? 0) + 1),
            }
          : item,
      );
    }, 1000);
});
watch(items, (current) => {
  const active = current.find((item) => item.id === playing.value);
  if (active?.duration && (active.currentTime ?? 0) >= active.duration)
    playing.value = undefined;
});
function retry(item: AttachmentUploadItem) {
  items.value = items.value.map((entry) =>
    entry.id === item.id
      ? { ...entry, status: "uploading", error: undefined }
      : entry,
  );
  for (const [delay, status] of [
    [900, "complete"],
    [1900, "idle"],
  ] as const) {
    const timer = setTimeout(() => {
      jobs.delete(timer);
      items.value = items.value.map((entry) =>
        entry.id === item.id ? { ...entry, status } : entry,
      );
    }, delay);
    jobs.add(timer);
  }
}
onBeforeUnmount(() => {
  clearInterval(clock);
  for (const timer of jobs) clearTimeout(timer);
  jobs.clear();
});
</script>
<template>
  <div class="w-full max-w-2xl px-3 py-6 sm:px-6">
    <AttachmentUpload
      v-model="items"
      @retry="retry"
      :playing-id="playing"
      @audio-toggle="playing = playing === $event.id ? undefined : $event.id"
      attachments-label="Attachments:"
    />
  </div>
</template>

<script setup lang="ts">
import { RotateCcw } from "lucide-vue-next";
import { onBeforeUnmount, onMounted, ref } from "vue";
import {
  FileUpload,
  type FileUploadItem,
  type FileUploadVariant,
} from "@/components/orvui/blocks/file-upload";

const initial: FileUploadItem[] = [
  {
    id: "brand-assets",
    name: "brand-assets.zip",
    size: 18400000,
    type: "application/zip",
    progress: 100,
    status: "success",
  },
  {
    id: "release-video",
    name: "release-cut.mov",
    size: 84200000,
    type: "video/quicktime",
    progress: 58,
    status: "uploading",
  },
  {
    id: "contracts",
    name: "vendor-contract.pdf",
    size: 2800000,
    type: "application/pdf",
    progress: 32,
    status: "error",
    error: "Connection lost",
  },
];
function useUploadDemo() {
  const items = ref(initial),
    variant = ref<FileUploadVariant>("centered");
  const jobs = new Map<string, ReturnType<typeof setInterval>>();
  function stop(id: string) {
    const job = jobs.get(id);
    if (job !== undefined) clearInterval(job);
    jobs.delete(id);
  }
  function start(id: string) {
    stop(id);
    const advance = () => {
      const at = items.value.findIndex((entry) => entry.id === id);
      if (at < 0 || items.value[at].status !== "uploading") {
        stop(id);
        return;
      }
      const previous = items.value[at];
      let progress = (previous.progress ?? 0) + 7;
      progress = Math.min(100, progress + Math.random() * 12);
      const updated: FileUploadItem = {
        ...previous,
        progress,
        status: progress === 100 ? "success" : "uploading",
      };
      const snapshot = Array.from(items.value);
      snapshot[at] = updated;
      items.value = snapshot;
      if (updated.status === "success") stop(id);
    };
    jobs.set(id, setInterval(advance, 520));
  }
  function reset() {
    for (const id of jobs.keys()) stop(id);
    items.value = initial;
    start("release-video");
  }
  onMounted(() => start("release-video"));
  onBeforeUnmount(() => {
    for (const id of jobs.keys()) stop(id);
  });
  return { items, variant, start, stop, reset };
}

const { items, variant, start, stop, reset } = useUploadDemo();
const choices = [
  { id: "centered", label: "Centered" },
  { id: "default", label: "Row" },
] as const;
</script>
<template>
  <div class="flex min-h-[30rem] w-full items-center justify-center">
    <div
      class="w-full max-w-md rounded-[2rem] border border-border bg-background p-3"
    >
      <div class="mb-3 flex flex-wrap items-center justify-between gap-2 px-1">
        <div>
          <p class="text-sm font-semibold text-foreground">Upload package</p>
          <p class="text-xs text-muted-foreground">
            {{ items.filter((item) => item.status === "success").length }} of
            {{ items.length }} files ready
          </p>
        </div>
        <div class="flex items-center gap-1.5">
          <div class="flex rounded-full border border-border bg-muted p-1">
            <button
              v-for="choice in choices"
              :key="choice.id"
              type="button"
              @click="variant = choice.id"
              :data-selected="choice.id === variant"
              class="h-7 rounded-full px-3 text-xs font-medium text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-foreground active:scale-95 data-[selected=true]:bg-background data-[selected=true]:text-foreground"
            >
              {{ choice.label }}
            </button>
          </div>
          <button
            type="button"
            @click="reset"
            class="grid h-9 w-9 place-items-center rounded-full border border-border text-muted-foreground transition-colors hover:text-foreground active:scale-95"
            aria-label="Reset upload queue"
          >
            <RotateCcw class="h-3.5 w-3.5" />
          </button>
        </div>
      </div>
      <FileUpload
        v-model="items"
        :variant="variant"
        @files-added="(added) => added.forEach((item) => start(item.id))"
        @retry="start($event.id)"
        @remove="stop($event.id)"
        :max-files="5"
        :title="
          variant === 'centered' ? 'Drop files to upload' : 'Drop release files'
        "
        description="PDF, images, video or zipped assets"
      />
    </div>
  </div>
</template>