Sélecteur de fichiers

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker } from 'vectis-ui'

const files = ref<File[]>([])
</script>

<template>
  <VFilePicker v-model="files" title="Drag your files here" subtitle="PDF or PNG, up to 5 MB" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker } from 'vectis-ui'

const plain = ref<File[]>([])
const described = ref<File[]>([])
</script>

<template>
  <div class="column">
    <VFilePicker v-model="plain" title="Drop your files here" />

    <VFilePicker
      v-model="described"
      multiple
      accept="image/*,.pdf"
      :max-size="5_000_000"
      title="Drop your files here"
      subtitle="Images or PDF, up to 5 MB each"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VFilePicker } from 'vectis-ui'

const under = ref<File[]>([])
const beside = ref<File[]>([])
const none = ref<File[]>([])

/* The same two files in all three, so the only thing that differs is where they are
   listed. They are built here rather than at setup: `File` is a browser type, and this
   page is rendered on the server before it ever reaches one. */
onMounted(() => {
  const seed = () => [
    new File([new Uint8Array(320_000)], 'contract.pdf', { type: 'application/pdf' }),
    new File([new Uint8Array(48_000)], 'figures.csv', { type: 'text/csv' }),
  ]
  under.value = seed()
  beside.value = seed()
  none.value = seed()
})
</script>

<template>
  <div class="column">
    <div class="narrow">
      <VFilePicker
        v-model="under"
        multiple
        preview="bottom"
        title="Listed under the zone"
        subtitle="What a narrow form wants, there being no room beside it"
      />
    </div>

    <!-- Left at the card's full width on purpose: the side list needs the room, and it
         folds back underneath as soon as the component itself is narrower than 34rem. -->
    <VFilePicker
      v-model="beside"
      multiple
      preview="end"
      title="Listed beside the zone"
      subtitle="Narrow the window and it folds back underneath"
    />

    <div class="narrow">
      <VFilePicker
        v-model="none"
        multiple
        title="Not listed, the default"
        subtitle="Two files are held all the same: the value never depends on this prop"
      />
    </div>
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
}
.narrow {
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VFilePicker } from 'vectis-ui'
import { attach_file as attachFile, description } from 'vectis-ui/icons'

const files = ref<File[]>([])

/* The files are built here and not at setup: `File` is a browser type, and this page is
   rendered on the server before it ever reaches one. */
onMounted(() => {
  files.value = [
    new File([new Uint8Array(24_000)], 'styles.css', { type: 'text/css' }),
    new File([new Uint8Array(180_000)], 'assets.zip', { type: 'application/zip' }),
  ]
})
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="files"
      multiple
      preview="bottom"
      title="Drop your sources here"
      :icon="attachFile"
      :type-icons="{ code: description }"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VFilePicker } from 'vectis-ui'

const shown = ref<File[]>([])
const hidden = ref<File[]>([])

/* A real PNG, drawn in the browser: a thumbnail is only ever painted from bytes an
   <img> can decode, so an empty buffer would fall back to the kind icon and prove
   nothing. Both zones are given the same two files. */
async function gradientPng(name: string): Promise<File> {
  const canvas = document.createElement('canvas')
  canvas.width = 96
  canvas.height = 96
  const context = canvas.getContext('2d')
  if (!context) return new File([], name, { type: 'image/png' })
  const gradient = context.createLinearGradient(0, 0, 96, 96)
  gradient.addColorStop(0, '#6366f1')
  gradient.addColorStop(1, '#ec4899')
  context.fillStyle = gradient
  context.fillRect(0, 0, 96, 96)
  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'))
  return new File(blob ? [blob] : [], name, { type: 'image/png' })
}

onMounted(async () => {
  const files = [
    await gradientPng('cover.png'),
    new File([new Uint8Array(90_000)], 'notes.pdf', { type: 'application/pdf' }),
  ]
  shown.value = files
  hidden.value = [...files]
})
</script>

<template>
  <div class="grid">
    <VFilePicker
      v-model="shown"
      multiple
      preview="bottom"
      title="Thumbnails, the default"
      subtitle="An image is shown as itself"
    />

    <VFilePicker
      v-model="hidden"
      multiple
      hide-thumbnails
      preview="bottom"
      title="hideThumbnails"
      subtitle="Every file shows its kind instead"
    />
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--vectis-space-5);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker, type FileRejection } from 'vectis-ui'

const one = ref<File[]>([])
const several = ref<File[]>([])

/* The component turns a file away and says so; showing why is the consumer's job, here
   and for every other limit. */
const refused = ref('')

function onReject({ file }: FileRejection) {
  refused.value = `${file.name} was turned away: this zone takes one file.`
}
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="one"
      preview="bottom"
      title="One file"
      subtitle="Drop two and the second is refused"
      @reject="onReject"
    />
    <p v-if="refused" class="value">{{ refused }}</p>

    <VFilePicker
      v-model="several"
      multiple
      preview="bottom"
      title="As many as you like"
      subtitle="multiple, with nothing else to bound it"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
.value {
  margin: 0;
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-danger-text);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker, type FileRejection } from 'vectis-ui'

const files = ref<File[]>([])
const refused = ref('')

function onReject({ file }: FileRejection) {
  refused.value = `${file.name} was turned away: images and PDF only.`
}
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="files"
      multiple
      accept="image/*,.pdf"
      preview="bottom"
      title="Images and PDF"
      subtitle="Browse and the dialog offers nothing else; drop and the rule is applied again"
      @reject="onReject"
    />
    <p v-if="refused" class="value">{{ refused }}</p>
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
.value {
  margin: 0;
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-danger-text);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker, type FileRejection } from 'vectis-ui'

const files = ref<File[]>([])
const refused = ref('')

function onReject({ file }: FileRejection) {
  refused.value = `${file.name} was turned away: 500 kB at most per file.`
}
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="files"
      multiple
      :max-size="500_000"
      preview="bottom"
      title="Up to 500 kB per file"
      subtitle="Each file is weighed on its own, so a small one still gets through"
      @reject="onReject"
    />
    <p v-if="refused" class="value">{{ refused }}</p>
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
.value {
  margin: 0;
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-danger-text);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VFilePicker, type FileRejection } from 'vectis-ui'

const files = ref<File[]>([])
const refused = ref('')

/* The reason says which rule was met, and the two here are not the same failure: one
   batch too heavy, or one file too many. */
function onReject({ file, reason }: FileRejection) {
  refused.value =
    reason === 'count'
      ? `${file.name} was turned away: three files at most.`
      : `${file.name} was turned away: 1 MB for the whole selection.`
}
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="files"
      multiple
      :max-total-size="1_000_000"
      :max-files="3"
      preview="bottom"
      title="1 MB in all, three files at most"
      subtitle="What is already in the list counts towards the total"
      @reject="onReject"
    />
    <p v-if="refused" class="value">{{ refused }}</p>
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
.value {
  margin: 0;
  font-size: var(--vectis-text-body-sm-size);
  color: var(--vectis-color-danger-text);
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { VFilePicker } from 'vectis-ui'

const taken = ref<File[]>([])
const empty = ref<File[]>([])

onMounted(() => {
  taken.value = [
    new File([new Uint8Array(320_000)], 'contract.pdf', { type: 'application/pdf' }),
    new File([new Uint8Array(48_000)], 'figures.csv', { type: 'text/csv' }),
  ]
})
</script>

<template>
  <div class="column">
    <VFilePicker
      v-model="taken"
      multiple
      readonly
      preview="bottom"
      title="Read-only"
      subtitle="What was taken stays on show, its remove buttons disabled along with the zone"
    />

    <VFilePicker
      v-model="empty"
      disabled
      title="Disabled"
      subtitle="No dialog, no drop, and the zone greys through the colour tokens"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 26rem;
}
</style>