Documentation
Webframe UI
Inputs
Upload

Upload

image

A file input to browse and upload files from local devices, such as computer, laptop, tablet, etc. It has a drag & drop file upload dropzone that can restrict uploadable file types.

For file preview or multiple file uploads, use UploadGrid because it has better UX (user experience). For instance, there is instant preview of selected images and extra information, such as file size.

TODO: Universal Input API, with input file format, parse, normalize and event action handlers.

Props

PropTypeDefaultDescription
accept
String

A comma-separated list of one or more file types allowed for upload. Examples of valid values:

  1. Filename extension: .svg, .jpg...
  2. File type wildcard: image/*, video/*...
  3. MIME type: image/jpeg, application/pdf...
  4. Any combination of above: image/*, .pdf.

For more details, refer to accept specs.

children
String
|
Number
|
Boolean
|
Function

Custom label to show inside Upload dropzone, default is placeholder Icon or Text

childBefore
String
|
Number
|
Boolean
|
Function

Custom UI to show inside Upload dropzone, before upload__label

childAfter
String
|
Number
|
Boolean
|
Function

Custom UI to show inside Upload dropzone, after upload__label

hyphen
Boolean
true

Whether to hyphenate Text when it overflows width

loading
Boolean
false

Whether to show loading spinner and block input interaction

maxFiles
Number

Maximum number of uploaded files (when multiple is true)

maxSize
Byte

Maximum file(s) upload size limit in bytes (accumulative for multiple uploads)

minSize
Byte

Minimum file(s) upload size limit in bytes (accumulative for multiple uploads)

multiple
Boolean

Whether to allow upload of more than one file

iconSelect
String
''

Icon name for selecting file upload, default style is plus Icon for empty string

iconRemove
String
''

Icon name for removing file upload, default style is cross Icon for empty string

square
Boolean

Whether to add squared CSS class to make the dropzone fill available space as square

value
Array

Input files - if passed, becomes a controlled-like component

defaultValue
Array

Initial Input files for uncontrolled-like component

onChange
Function

Handler(event, acceptedFiles: File[] | null, name?, self) when input value changes

onError
Function
(e, errs) =>
  alert (
    errs
      .map((e) => e.message)
      .join('\n')
  )

Handler(event, {message: String, file?: File}[], name?, self) when input changes and validation fails

onRemove
Function

Handler(event, removedFiles: File[], name, self, callback) before input files are to be removed,

To use custom behavior, set event.preventDefault, then fire callback() yourself.

The default behavior uses window.confirm() before calling onChange to remove files.

Examples

Basic Usage

Example
Via Universal Input

Upload Configs

Restrict to PNG Images Only
Allow Any Image File
Allow Uploading Multiple Files
Maximum 3 Files Validation
Minimum 3kB to Maximum 30kB File Size

File Dropzone

Squared Dropzone with Placeholder Text
Custom File Dropzone UI
Custom Select/Remove Icon

Input Sizes

Example

Input States

Disabled
Read only
Loading

Event Handlers

On Change Callback
On Focus Callback
On Blur Callback
On Remove Callback

Please refer to Universal File Input for more upload field props.

TextareaUploadgrid