File Upload

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

Examples

Single File Upload

By default, only one upload is allowed.

Select or drop file here

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

<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';

<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/FileUpload/ImageUpload';

<ImageUpload />

Uploading State

When an uploading prop is passed, the component will display a progress indicator. If progress is not passed, the upload will use an UnknownProgress.

Uploading...

0%

Uploading...

0%

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

<FileUpload uploading />
<ImageUpload uploading />

Complete State

When a complete prop is passed, the component will a success state. An optional completeAction can be provided.

Complete

Delete?

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

<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 } from '@curology/ui-components-web/react/FileUpload';
import { ImageUpload } from '@curology/ui-components-web/react/ImageUpload';

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

Disabled State

When a disabled prop is passed, the file upload becomes inactive and turns grayscale.

Select or drop file here

Select or drop file here

Select or drop file here

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

<FileUpload disabled />
<ImageUpload disabled />

Props

FileUploadProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
accept	Accept		No	Set accepted file types. https://react-dropzone.js.org/#section-accepting-specific-file-types
autoFocus	false | true		No	Set to `true` to focus the root element on render.
complete	false | true	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	false | true	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; }> | undefined		No
icon	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	The icon to display pre-upload.
iconSize	null | number | "md" | "lg" | "sm" | "xl" | "xs" | "xxl"		No	The size of the icon to display pre-upload.
initialLabel	string		No	An initial CTA to display.
initialState	FC<{ disabled: boolean; icon: IconAcceptableValue | undefined; iconSize?: number | "md" | "lg" | "sm" | "xl" | "xs" | "xxl" | null | undefined; 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	false | true	true	No	Allow drag 'n' drop (or selection from the file dialog) of multiple files.
name	string		No	The name of the input.
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	false | true	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?: IconAcceptableValue | undefined; 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.

ImageUploadProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
accept	Accept		No	Set accepted file types. https://react-dropzone.js.org/#section-accepting-specific-file-types
aspectRatio	"auto" | "square" | "1:1" | "2:3" | "3:2" | "3:4" | "4:3" | "4:5" | "5:4"	'3:4'	No	Constrain the image to a specific aspect ratio.
autoFocus	false | true		No	Set to `true` to focus the root element on render.
complete	false | true	false	No	Is the upload complete?
completeAction	ReactNode		No	A component to display when the upload is complete.
disabled	false | true	false	No	Enable/disable the input.
error	Error		No	Is there an error to display?
errorAction	ReactNode		No	A component to display when the upload has errored.
icon	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	The icon to display pre-upload.
iconSize	null | number | "md" | "lg" | "sm" | "xl" | "xs" | "xxl"		No	The size of the icon to display pre-upload.
imageOverflowHidden	false | true		No	Hide the overflow in the preview image.
initialLabel	string		No	An initial CTA to display.
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	false | true	true	No	Allow drag 'n' drop (or selection from the file dialog) of multiple files.
name	string		No	The name of the input.
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.
src	string		No	The image to display.
uploading	false | true	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`.
validator	<T extends File>(file: T) => FileError | FileError[] | null		No	Custom validation function. It must return null if there's no errors.

FileUploadActionProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
italic	false | true	false	No	Display the text with emphasis?
size	"body" | "h1" | "h2" | "h3" | "meta" | "inherit" | "d1" | "d2" | "subhead" | "body-lg" | "cta"	'inherit'	No	How large should the text be? This also affects the font-face for display text.
weight	"md" | "light" | "100" | "300" | "400" | "500" | "700" | "800" | "900" | "thin" | "normal" | "bold" | "extrabold" | "black"	'normal'	No	How heavy should the text be?