Upload - Keep React

Upload Component is a user interface element that enables users to upload files or media from their local device to a web application or platform. It provides a means to select files, preview them if applicable, and initiate the upload process. The component is essential for allowing users to share content, images, documents, and other files with the application or website.

Default Upload#

The Default Upload component enables users to choose and upload a file.The onFileChange callback is used to handle the file selection and update the selected file's name.

Drag and Drop files here

Files: JPEG, PNG, GIF

Maximum: 5MB

Upload Pending#

The progressType prop is set to "pending" to indicate that the progress is pending.

Drag and Drop files here

Files: JPEG, PNG, GIF

Maximum: 5MB

Uploading...

45%

1 minutes left

Upload Failed#

The progressType prop is set to "error" to indicate that the progress is failed.

Drag and Drop files here

Files: JPEG, PNG, GIF

Maximum: 5MB

Something error

45%

2 days left

Upload Success#

The progressType prop is set to "success" to indicate that the progress is success.

Drag and Drop files here

Files: JPEG, PNG, GIF

Maximum: 5MB

File Name.pdf

Size: 515 Kb

Horizontal Upload#

The horizontal prop is set to true, allowing for a horizontal layout.

Drag and Drop files here

Files : JPEG, PNG, GIF

Maximum: 5MB

Horizontal Upload Pending#

The progressType="pending" and horizontal={true} props indicate that the horizontal upload progress is pending.

Drag and Drop files here

Files : JPEG, PNG, GIF

Maximum: 5MB

Uploading...

45%

1 minutes left

Horizontal Upload Failed#

The progressType="error" and horizontal={true} props indicate that the horizontal upload progress is failed.

Drag and Drop files here

Files : JPEG, PNG, GIF

Maximum: 5MB

Something error

45%

21 minutes left

Horizontal Upload Success#

The progressType="success" and horizontal={true} props indicate that the horizontal upload progress is success.

Drag and Drop files here

Files : JPEG, PNG, GIF

Maximum: 5MB

File Name.pdf

Size: 515 Kb

Horizontal Disabled Upload#

The horizontal={true} and disabled={true} props indicate that the horizontal upload disabled.

Drag and Drop files here

Files : JPEG, PNG, GIF

Maximum: 5MB

Upload Disabled#

The disabled={true} prop indicate that the upload component is disabled.

Drag and Drop files here

Files: JPEG, PNG, GIF

Maximum: 5MB

API Reference#

Explore the available props for the upload component

Property	Description	Type	Default
file	The selected file's name or path for display.	string	None
horizontal	Arranges the component horizontally if set to true.	boolean	false
disabled	Disables interactions with the upload component.	boolean	false
showProgressBar	Indicates whether to display a progress bar during file upload.	boolean	false
progressType	Sets the visual style of the progress bar based on the upload status.	success error pending	pending
progress	The progress percentage of the file upload.	number	0
uploadTime	Timestamp indicating the time of the upload.	string	0
onFileChange	Callback function when the selected file changes.	Function	(e:ChangeEvent)=>void