WUI logo

FileDrop

Allows user to drop or upload a file easily.

version

4.1.2

install

yarn add @welcome-ui/file-drop

usage

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

About #

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)

Default #

By default, accept: is set to image/*, see more about media type.

function() {
const [value, setValue] = React.useState(null)
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field
label="Your file"
hint="Files must be < 2MB"
required
>
<FileDrop
name="file"
isClearable
isEditable
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
/>
</Field>
)
}

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.

function() {
const [value, setValue] = React.useState(null)
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field
label="Your file"
hint="Files must be < 2MB"
required
>
<FileDrop
isEditable
isClearable
name="file"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
wordings={{
title:"My custom title",
hint:"My custom hint",
fileButtonText:"My custom file button"
}}
/>
</Field>
)
}
With preview #
function () {
const [value, setValue] = React.useState('https://test-documents-file/file.docx?v=63731713698')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field hint="Files must be < 2MB" label="File">
<FileDrop
isEditable
isClearable
name="file"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
wordings={{
previewButtonText:"My custom preview button",
}}
/>
</Field>
)
}

Show preview if value exists #

Image #
function () {
const [value, setValue] = React.useState('https://media3.giphy.com/media/uYiJD8fcWDys8/giphy.gif?cid=790b76115d08fb457747437951ff7674&rid=giphy.gif')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field hint="Files must be < 2MB" label="Avatar">
<FileDrop
name="avatar"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
isEditable
isClearable
value={value}
/>
</Field>
)
}
Other files #
function () {
const [value, setValue] = React.useState('https://test-documents-file/file.docx?v=63731713698')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field hint="Files must be < 2MB" label="File">
<FileDrop
accept="application/*, audio/*, video/*, text/*"
isEditable
isClearable
name="file"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
/>
</Field>
)
}

File 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.

function () {
const [value, setValue] = React.useState('https://cdn-images.welcomehome.io/zn9KvR98haoYRV6m1T-LR4c5h0HPZtVtvzwKPv02wgA/rs:auto:600::/q:100/czM6Ly93aC1wcml2YXRlLXByb2R1Y3Rpb24vcHJvZHVjdGlvbi91cGxvYWRzL3doL2Jsb2Nrcy9iZTI2MTc4OC1mYjc5LTRlZTQtYjQ4OC04ZDhiYTk4YTY3NDIvY292ZXIvdHdpdHRlckB4Mi5wbmc')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<>
<Field label="Image file">
<FileDrop
name="file1"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
forceFileType="image"
/>
</Field>
<Field mt="xl" label="Music file">
<FileDrop
name="file2"
handleAddFile={handleChange}
handleRemoveFile={handleChange}
value={value}
forceFileType="audio"
/>
</Field>
</>
)
}

Disabled #

<Field disabled>
<FileDrop name="avatar" />
</Field>

Properties #

FileDrop #
NameType(s)DefaultRequired
accept
string
string & string[]

Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg"

image/*
isClearable
Boolean
isEditable
Boolean
forceFileType
"audio"
"video"
"image"
handleAddFile
(event: DropEvent | CreateEvent) => void
handleRemoveFile
(event: DropEvent | CreateEvent) => void
name
string
onBlur
() => void
onChange
(event: DropEvent | CreateEvent) => void
onError
(event?: string) => void
value
string
FileWithPreview
wordings
WordingsType

Pass an object with optional fields title, hint, fileButtonText and/or previewButtonText (string or JSX.Element)

Packages #

Dependencies #
Peer dependencies #

Previous

Field