File Upload

Used to select files to be uploaded from the user’s device.

Demo

React

Vue

Usage

React

import { useState } from 'react';
import { FileUpload } from '@fintech-sandpit/ui/react';

const [files, setFiles] = useState<File[]>([]);

return (
  <FileUpload
    value={files}
    onChange={setFiles}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { FileUpload } from '@fintech-sandpit/ui/vue';

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

<template>
  <FileUpload v-model="model" />
</template>

Props

React

Name	Type	Default	Description
value	File[]	—	The list of files to be uploaded
label	string	—	The label of the file upload
name	string	—	The name of the file upload
accept	string | string[]	—	The accepted file types
dropZone	boolean	—	Whether to use a drop zone
dropZoneInner	ReactNode	—	The content of the drop zone
multiple	boolean	—	Whether to allow multiple files
maxFiles	number	—	The maximum number of files to upload
minFileSize	number	—	The minimum file size
maxFileSize	number	—	The maximum file size
uploadTrigger	ReactNode	—	The content of the upload trigger
directory	boolean	—	Whether to allow directory uploads
disabled	boolean	—	Whether the file upload is disabled

Vue

Name	Type	Default	Description
model-value	File[]	—	The list of files to be uploaded 1
label	string	—	The label of the file upload
name	string	—	The name of the file upload
accept	string | string[]	—	The accepted file types
drop-zone	boolean	—	Whether to use a drop zone
multiple	boolean	—	Whether to allow multiple files
max-files	number	—	The maximum number of files to upload
min-file-size	number	—	The minimum file size
max-file-size	number	—	The maximum file size
directory	boolean	—	Whether to allow directory uploads
disabled	boolean	—	Whether the file upload is disabled

1. Can be used with the v-model directive for two-way binding.

Slots

Name	Description
drop-zone-inner	The content of the drop zone
upload-trigger	The content of the upload trigger

Events

React

Name	Type	Description
onChange	(files: File[]) => void	Callback fired when the files are added or removed
onAccept	(file: File) => void	Callback fired when the file is accepted
onReject	(file: File, errors: FileError[]) => void	Callback fired when the file is rejected

Vue

Name	Payload	Description
update:model-value	File[]	Event handler for when the files are added or removed
accept	File	Event handler for when the file is accepted
reject	File	Event handler for when the file is rejected