File Upload

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

Demo

React

Vue

Example

React

import { useState } from 'react';
// Import component
import { FileUpload } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that you need to import the styles
// for Button, Icon and FileUpload components since the FileUpload component
// is composed of these components.
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/file_upload.css';

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

return (
  <FileUpload
    value={files}
    accept=".jpg,.png"
    maxFileSize={256 * 1024}
    dropZoneLabel={(
      <div className="text-center text-sm">
        <p>
          Click to upload, or drag and drop your file here.
        </p>

        <p className="space-x-2">
          <span>
            Accepted:
          </span>

          <strong>
            JPG, PNG &ndash; Max 256 KB
          </strong>
        </p>
      </div>
    ) : undefined}
    onChange={setFiles}
    onReject={(file, errors) => {
      alert(errors[0]);
    }}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { FileUpload } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that you need to import the styles
// for Button, Icon and FileUpload components since the FileUpload component
// is composed of these components.
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/file_upload.css';

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

<template>
  <FileUpload v-model="model">
    <template #drop-zone-label>
      <div class="text-center text-sm">
        <p>
          Click to upload, or drag and drop your file here.
        </p>

        <p>
          <span>
            Accepted:
          </span>

          <strong>
            JPG, PNG &ndash; Max 256 KB
          </strong>
        </p>
      </div>
    </template>
  </FileUpload>
</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
dropZoneLabel	ReactNode	—	The content of the drop zone label
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
drop-zone-label	The content of the drop zone label
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