FileUploader

Editable Example

import { FileUploader } from "@wfp/react";

() => {
  return <FileUploader />;
};

Prop	Default	Description	Value
withIcon `boolean`	–	Determines if an icon should be displayed in the dropzone If true, an icon will be shown to represent file uploading	withIcon
dropzoneTitle `string`	Drag 'n' drop some files here, or click to select files	The title to be displayed in the dropzone area Useful for guiding users on the action to take, such as "Drag files here" default: Drag 'n' drop some files here, or click to select files
withFileSize `boolean`	–	Specifies whether the file size should be displayed If true, the size of uploaded files will be shown to the user in kB	withFileSize
onChange `(acceptedFiles: File[]) => void`	–	Callback function to handle change events on the file input @param event The event triggered when the user selects a file
iconDescription `string`	Provide icon description	Provide a description for the icon used in the file uploader default: Provide icon description
filenameStatus `"edit" \|"complete" \|"uploading"`	–	Status of the file upload process, could be 'edit', 'complete', or 'uploading'. In the edit status you can removed uploaded files
onClick `(fileRemoved: File,event: MouseEvent) => void`	–	Callback function to handle click events on the file input @param event The event triggered when the user clicks the file input
hideFileList `boolean`	false	Determines if the list of uploaded files should be hidden If true, the list won't be displayed, providing a cleaner UI, and giv you an opportunity to create oun list of files default: false	hideFileList
multiple `boolean`	true	Determines if multiple files can be uploaded at once If true, users can select multiple files in a single action. Default is true default: true	multiple

FileUploader

FileUploader

Editable Example

withIcon

dropzoneTitle

withFileSize

onChange

iconDescription

filenameStatus

onClick

hideFileList

multiple

On this page