FileUpload

The File Upload component enables users to select and upload files from their device. It supports both drag-and-drop and traditional file selection methods, providing a straightforward way to manage file uploads. This component is essential for applications that require users to submit documents, images, or other file types, ensuring a smooth and efficient upload experience.

Source

Github

import { FileUpload } from 'welcome-ui/FileUpload'

const Example = () => {
  const handleChange = () => {
    // your code
  }

  return (
    <FileUpload
      accept="*/*"
      handleAddFile={handleChange}
      handleRemoveFile={handleChange}
      name="file"
      value=""
    />
  )
}

export default Example

Examples

Preview

Github

Multiple

Add multiple property.

Github

Disabled

Github

Customize

Button

You can change the upload button component.

Github

Preview

You can change the preview component.

Github

You can also set the preview prop to null and handle your own preview in place of the upload button with files & onRemoveFile render props.

Github

File drop Hint