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

Github

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

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

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

export default Example

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: