Ecme - The Ultimate Next & TypeScript Web Template

Upload

Upload is a component that allow user to attach files & images, it can be used with form and upload the data to some where else.

A basic Upload example.

With draggable prop, we can drag files to a specific area to proceed upload.

Choose a file or drag and drop here

Disabled the Upload component by setting disabled to true.

Choose a file or drag and drop here

We can replace the default upload look.

Drop your image here, or browse

Support: jpeg, png, gif

Use beforeUpload prop to make a callback function to validate file before upload.

jpeg or png only (max 500kb)

An example for avatar upload

Prop	Description	Type	Default
accept	File types that can be accepted as input accept attribute	`string`	-
beforeUpload	The callback function that before file upload, return false or string with value to intercept the upload	`(file: FileList \| null, fileList: File[]) => boolean \| string`	-
disabled	Whether to disable Upload	`boolean`	`false`
draggable	Whether enable draggable upload	`boolean`	`false`
fileList	Initial file list	`File[]`	`[]`
fileListClass	Class for file list wrapper	`string`	-
fileItemClass	Class for file item	`string`	-
onChange	Callback function after file uploaded	`(file: File[], fileList: File[]) => void`	-
onFileRemove	Callback function when a file was deleted	`(file: File[]) => void`	-
showList	Whether to show uploaded file list	`boolean`	`true`
tip	Hint message under Upload	`string` \| `ReactNode`	-
uploadLimit	Maximum file to upload	`number`	-