FileUpload

Penggunaan

v-model selalu berupa File[], bahkan untuk satu file - klik dropzone atau seret file ke atasnya:

<script setup lang="ts">
const files = ref<File[]>([])
</script>

<template>
  <SFileUpload v-model="files" />
</template>

FileUpload hanya memilih dan memvalidasi file - mengirimkannya ke server terserah Anda (panggilan fetch/FormData biasa menggunakan apa pun di v-model, kapan pun Anda ingin memicunya).

Multiple files

multiple memungkinkan memilih lebih dari satu file sekaligus (setiap seleksi baru atau drop menambahkan ke daftar daripada menggantikannya); max-files membatasi berapa banyak yang diizinkan secara total:

<SFileUpload v-model="files" multiple :max-files="4" />

Validasi

accept (MIME types/wildcards yang dipisahkan koma seperti image/*, atau ekstensi seperti .pdf) dan max-size (bytes) menolak file yang tidak cocok - diterapkan pada dialog file native dan apa pun yang di-drop (drop memotong filtering sendiri dari dialog sepenuhnya). File yang ditolak tidak pernah mencapai v-model - dengarkan @error untuk mengetahui mengapa dan tampilkan sesuka Anda:

<SFileUpload
  v-model="files"
  accept="image/*"
  :max-size="1024 * 1024"
  @error="(rejected) => console.log(rejected)"
/>

Warna

<SFileUpload color="success" />

Integrasi formulir

Bungkus dalam FormField untuk mendapatkan id/name/invalid dan aria-describedby terhubung secara otomatis - invalid fallback ke state FormField sendiri saat tidak diatur langsung pada file upload, dan size juga sama.

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema FileUpload sendiri:

Props

Events

Slots