Upload ​

<script setup lang="ts">
import { MediaInput, UploadedMedia } from '@youcan/ui-vue3';
import { ref, watch } from 'vue';

const attachments = ref<File[]>([]);
const disabled = ref(false);
const limit = 4;

const checkLimit = () => {
  disabled.value = attachments.value.length >= limit;
};

const deleteFile = (file: File) => {
  const idx = attachments.value.indexOf(file);
  if (idx > -1) {
    attachments.value.splice(idx, 1);
    checkLimit();
  }
};
watch(attachments, () => {
  checkLimit();
});
</script>

<template>
  <div class="container">
    <div class="files-grid">
      <UploadedMedia
        v-for="(attachment, index) in attachments"
        :key="index"
        :file="attachment"
        @delete="deleteFile(attachment)"
      />
    </div>
    <MediaInput v-model="attachments" :limit="limit" :disabled="disabled" />
  </div>
</template>

<script setup lang="ts">
import { UploadedFile } from '@youcan/ui-vue3';

const file = new File(['meditations_marcus_aurelius'], 'Meditations.pdf', {
  type: 'application/pdf',
});
</script>

<template>
  <UploadedFile :progress="80" :file="file" />
</template>