File Upload
Input component to upload files.
Basic Usage
This file upload component can be triggered via the button upload or dragging and dropping the files to the drop zone.
vue
<template>
<div>
<spr-file-upload
v-model="files1"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Attachments"
multiple
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const files1 = ref([]);
</script>Type
There are three types for file upload: default, and center.
vue
<template>
<div class="spr-flex spr-flex-col spr-gap-2">
<spr-file-upload
v-model="files2"
type="default"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Default File Upload"
multiple
/>
<spr-file-upload
v-model="files3"
type="center"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Center File Upload"
multiple
/>
</div>
</template>Disabled
When the file upload component is disabled, it will prevent users from triggering the upload button and dragging & dropping files.
vue
<template>
<div class="spr-flex spr-flex-col spr-gap-2">
<spr-file-upload
v-model="files4"
type="default"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Default File Upload"
multiple
disabled
/>
<spr-file-upload
v-model="files5"
type="center"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Center File Upload"
multiple
disabled
/>
</div>
</template>Error
For client-side validation of the file upload, we can show the error message as follows:
vue
<template>
<div class="spr-flex spr-flex-col spr-gap-2">
<spr-file-upload
v-model="files6"
type="default"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Default File Upload"
multiple
:show-error="true"
:error-messages="['File type is not supported. It must be a JPG or PNG file.']"
/>
<spr-file-upload
v-model="files7"
type="center"
:file-types="['image/jpeg', 'image/png']"
:max-file-size="10"
title="Center File Upload"
multiple
:show-error="true"
:error-messages="['File size should not be greater than 10MB.']"
/>
</div>
</template>API Reference
| Name | Description | Type | Default |
|---|---|---|---|
| type | Component size of the file upload | 'default' | 'center' | 'default' |
| title | The title label of the file upload component. | String | |
| multiple | Flag to enable multiple file uploading. | Boolean | false |
| disabled | Flag to disable file uploading. | Boolean | false |
| modelValue | The array of files. | File[] | [] |
| maxFileSize | The maximum file size in MB allowed for file uploading. | Number | 10 |
| fileTypes | Array of file types allowed for file uploading. | String[] | ['application/pdf','application/msword','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',application/vnd.ms-powerpoint','text/plain','text/csv','image/apng','image/avif','image/gif','image/jpeg','image/png','image/svg+xml','image/webp'] |
| showError | Flag to display the error message. | Boolean | false |
| errorMessages | Array of error messages to display. | String[] | [] |
| hideFilePreviewIcon | Flag to hide the icon when viewing the list of files. | Boolean | false |
| hideDropzoneLabel | Flag to hide the label of drop zone label. | Boolean | false |
| supportedFileTypeLabel | Custom string label for supported file types. "Supports: [custom text]" | String | null |