Ecme logoEcme logo
    Ecommerce
    Project
    Marketing
    Analytic
    AI
      Chat
      Image
    Projects
      Scrum Board
      List
      Details
      Tasks
      Issue
    Customer
      List
      Edit
      Create
      Details
    Products
      List
      Edit
      Create
    Orders
      List
      Edit
      Create
      Details
    Account
      Settings
      Activity log
      Roles & Permissions
      Pricing
    Asset Management
      Asset
      Asset Category
      Manufacturer
      Model
    Help Center
      Support Hub
      Article
      Edit Article
      Manage Article
    Calendar
    File Manager
    Mail
    Chat
    Common
      Button
      Grid
      Typography
      Icons
    Feedback
      Alert
      Dialog
      Drawer
      Progress
      Skeleton
      Spinner
      Toast
    Data Display
      Avatar
      Badge
      Calendar
      Cards
      Table
      Tag
      Timeline
      Tooltip
    Forms
      Checkbox
      Date Picker
      Form Control
      Input
      Input Group
      Radio
      Segment
      Select
      Slider
      Switcher
      Time Input
      Upload
    Navigation
      Dropdown
      Menu
      Pagination
      Steps
      Tabs
    Graph
      Charts
      Maps
    Sign In
      Simple
      Side
      Split
    Sign Up
      Simple
      Side
      Split
    Forgot Password
      Simple
      Side
      Split
    Reset Password
      Simple
      Side
      Split
    Otp Verification
      Simple
      Side
      Split
    Access Denied
    Landing
    Documentation
    Shared Component
    Utilities
    Changelog
Anonymous
No email available
Copyright © 2026 Ecme All rights reserved.
Term & Conditions | Privacy & Policy

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.

Basic

A basic Upload example.

Drag and Drop

With draggable prop, we can drag files to a specific area to proceed upload.
Choose a file or drag and drop here

Disabled

Disabled the Upload component by setting disabled to true.
Choose a file or drag and drop here

Customize

We can replace the default upload look.

Drop your image here, or browse

Support: jpeg, png, gif

Upload Control

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

jpeg or png only (max 500kb)

Avatar

An example for avatar upload

API

Upload
PropDescriptionTypeDefault
acceptFile types that can be accepted as input accept attributestring-
beforeUploadThe callback function that before file upload, return false or string with value to intercept the upload(file: FileList | null, fileList: File[]) => boolean | string-
disabledWhether to disable Uploadbooleanfalse
draggableWhether enable draggable uploadbooleanfalse
fileListInitial file listFile[][]
fileListClassClass for file list wrapperstring-
fileItemClassClass for file itemstring-
onChangeCallback function after file uploaded(file: File[], fileList: File[]) => void-
onFileRemoveCallback function when a file was deleted(file: File[]) => void-
showListWhether to show uploaded file listbooleantrue
tipHint message under Uploadstring | ReactNode-
uploadLimitMaximum file to uploadnumber-
TABLE OF CONTENT
  • Basic
  • Drag and Drop
  • Disabled
  • Customize
  • Upload Control
  • Avatar