WUI logo

FileDrop

The FileDrop component allows users to upload files by dragging and dropping them into a designated area or by clicking to select files from their device. It simplifies the file upload process with an intuitive, user-friendly interface, providing visual feedback and handling multiple files. This component is ideal for applications that require easy and efficient file uploads, improving overall user experience.

Source@welcome-ui/file-drop
OverviewProps
import * as React from 'react'
import { FileDrop } from '@welcome-ui/file-drop'


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


  return (
    <FileDrop
      handleAddFile={handleChange}
      handleRemoveFile={handleChange}
      isClearable
      isEditable
      name="file"
      value=""
    />
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/file-drop
2

Import component:

import { FileDrop } from '@welcome-ui/file-drop'

Examples

FileDrop uses render props to give you more flexibility on what to render at each state change:

  • isDefault: No file uploaded and no user interaction
  • isHoverAccept: File is being dragged over and matches the accept string
  • isHoverReject: File is being dragged over but does not match the accept string

You also have access to:

  • openFile: To open the native file chooser dialog box
  • fileUrl: URL of file if one has been opened/dropped (to show a preview)

By default, accept: is set to { "image/*": [] }. See more about showOpenFilePicker and media type.

Custom wordings

By default:

  • title: is set to "Add file"
  • hint: is set to "Drag & drop a file here or"
  • fileButtonText: is set to "Browse file"
  • previewButtonText: is set to "Preview"

You can override translations with a wordings object.

With preview

Preview

Image

Other

Without type

Sometime in the url we don't have the type of the file, you can override with forceFileType set to image, audio or video.

With a custom filename

By default, the filename is retrieved from the url. If you want to display a custom filename, you can use the fileName prop.

Disabled

FieldFile upload