File Upload

Accept files, mainly images, from a user's device. Supports drag-and-drop.

Examples

By default, only one upload is allowed.

Single File Upload

Select or drop file here

import { FileUpload } from '@curology/ui-components-web/react';

<FileUpload />

Multiple File Upload with MIME limitations

Using the accept prop, you can pass a list of accepted MIME types and file extensions. You can also allow for more than one file to be uploaded at a time with the multiple prop, and set a maximum number of files using the maxFiles prop.

Select or drop files here

import { FileUpload } from '@curology/ui-components-web/react';

<FileUpload 
  accept={{
    'image/jpeg': ['.jpg', '.jpeg'],
    'image/png': ['.png'],
    'image/gif': ['.gif'],
  }}
  maxFiles={5} 
  multiple
/>

Image Upload

An image-specific uploader with built-in image preview is also available. It's limited to one file and has default accept values, but it otherwise works the same as the FileUpload component.

CTA

import { ImageUpload } from '@curology/ui-components-web/react';

<ImageUpload />

Uploading State

Uploading...

0%

Uploading...

0%

import { FileUpload, ImageUpload } from '@curology/ui-components-web/react';

<FileUpload uploading />
<ImageUpload uploading />

Complete State

Complete

Delete?

import { FileUpload, ImageUpload } from '@curology/ui-components-web/react';

<FileUpload 
  complete 
  completeAction={<FileUploadAction href="#">Delete?</FileUploadAction>} 
/>
<ImageUpload 
  complete 
  completeAction={<FileUploadAction href="#">Delete?</FileUploadAction>} 
  src={...}
/>

Error State

Passing an instance of Error as the error prop will cause the input's color scheme to change. If an errorAction is provided, it will be added to the bottom of the input.

Error: An error message!

Retry?

Error: An error message!

import { FileUpload, ImageUpload } from '@curology/ui-components-web/react';

<FileUpload
  error={errorObject} 
  errorAction={<FileUploadAction href="#">Retry?</FileUploadAction>}
/>
<ImageUpload
  error={errorObject} 
  errorAction={<FileUploadAction href="#">Retry?</FileUploadAction>}
/>

Disabled State

Select or drop file here

Select or drop file here

Select or drop file here

import { FileUpload, ImageUpload } from '@curology/ui-components-web/react';

<FileUpload disabled />
<ImageUpload disabled />

Props

Name	Type	Default Value	Required	Description
accept	Accept		No	Set accepted file types. https://react-dropzone.js.org/#section-accepting-specific-file-types
autoFocus	boolean		No	Set to `true` to focus the root element on render.
complete	boolean	false	No	Is the upload complete?
completeAction	ReactNode		No	A component to display when the upload is complete.
completeState	FC<{ completeAction?: ReactNode; id: string; }>		No
disabled	boolean	false	No	Enable/disable the input.
dropState	FC<{ disabled: boolean; id: string; }>		No
error	Error		No	Is there an error to display?
errorAction	ReactNode		No	A component to display when the upload has errored.
errorState	FC<{ errorAction?: ReactNode; id: string; message?: string; }>		No
icon	"head" | "circle" | ReactElement<any, string | JSXElementConstructor<any>> | "placeholder" | IconName | "accordion-caret-down" | ... 13 more ...		No	The icon to display pre-upload.
initialLabel	string		No	An initial CTA to display.
initialState	FC<{ disabled: boolean; icon?: "head" | "circle" | ReactElement<any, string | JSXElementConstructor<any>> | "placeholder" | IconName | ... 14 more ...; id: string; maxFiles: number; text?: string; }> | undefined		No
maxFiles	number	1	No	Maximum accepted number of files. Setting to `0` means there is no limit on many files are accepted.
maxSize	number	Infinity	No	Maximum file size (in bytes).
minSize	number	0	No	Minimum file size (in bytes).
multiple	boolean	true	No	Allow drag 'n' drop (or selection from the file dialog) of multiple files.
onError	((err: Error) => void)		No	Callback run whenever selecting a file throws an error.
onFileAdded	(<T extends File>(files: T[], event: DropEvent) => void)		No	Callback run whenever a new file is added.
onFileRejected	((fileRejections: FileRejection[], event: DropEvent) => void)		No	Callback run whenever a new file is added.
progress	number		No	Display a specific upload progress. If `uploading` is `false` this will have no effect.
uploading	boolean	false	No	Should the uploading state be displayed? If `progress` is `undefined`, this will use a faux progress indicator that never reaches 100% until `complete` becomes `true`.
uploadingState	FC<{ id: string; icon?: "head" | "circle" | ReactElement<any, string | JSXElementConstructor<any>> | "placeholder" | IconName | ... 14 more ...; progress?: number; }> | undefined		No
validator	(<T extends File>(file: T) => FileError | FileError[] | null)		No	Custom validation function. It must return null if there's no errors.

Name	Type	Default Value	Required	Description
id	string		Yes
message	string		No