Components
Forms
FileUploader

FileUploader

Simple input to upload files via drag and drop or file selection. The FILE UPLOADER component allows users to select and upload files to a system, enabling the transfer of documents, images, or other types of files.

Import statement

import { FileUploader } from "@wfp/react"

Example default

Editable Example

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

<FileUploader dropzoneTitle="Drag 'n' drop some files here, or click to select files" />;

Example with icon and edit state

Editable Example

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

<FileUploader
  withIcon
  filenameStatus="edit"
  withFileSize
/>;

Inherited react-dropzone Props

In addition to the custom props above, FileUploader accepts and passes through most props from the underlying react-dropzone component (all DropzoneProps except onDrop). This allows for detailed configuration of the dropzone behaviour.

Key react-dropzone props you can use include:

  • accept (e.g., { 'image/*': ['.jpeg', '.png'] })
  • disabled (boolean)
  • maxFiles (number)
  • maxSize (number, in bytes)
  • minSize (number, in bytes)
  • multiple (boolean, default true, explicitly handled by FileUploader)
  • noClick (boolean)
  • noKeyboard (boolean)
  • noDrag (boolean)
  • preventDropOnDocument (boolean)

For a comprehensive list and detailed explanations of all available react-dropzone props, please consult the official react-dropzone documentation.

On this page