# <DropZone />
DropZone which can be used for uploading files.
General usage:
import { DropZone, DropZoneProps } from 'admin-bro'
how to use it in your custom component.tsx (TypesScript):
import React, { useState } from 'react'
import { DropZone, Label, BasePropertyProps } from 'admin-bro'
import { unflatten } from 'flat'
const UploadPhoto: React.FC<BasePropertyProps> = (props) => {
const { property, record, onChange } = props
const onUpload = (files: FileList) => {
const newRecord = {...record}
const file = files.length && files[0]
onChange({
...newRecord,
params: {
...newRecord.params,
[property.name]: file,
}
})
event.preventDefault()
}
return (
<Box>
<Label>{property.label}</Label>
<DropZone onChange={onUpload} />
</Box>
)
}
View Source admin-bro/src/frontend/components/design-system/molecules/drop-zone/drop-zone.tsx, line 122
Examples
Single file with validation
Multi file of photos
Type Definitions
# DropZoneProps
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
multiple |
boolean |
<optional> |
if drop zone should handle multiple uploads |
files |
Array.<File> |
<optional> |
Initial files collection (in case you want to hold files state) |
onChange |
OnDropZoneChange |
<optional> |
Callback performed when the file is dropped/selected |
validate |
object |
<optional> |
Validate options |
maxSize |
number |
<optional> |
Maximum size of the uploaded file in bytes. If not defined - all files are allowed. |
mimeTypes |
Array.<string> |
<optional> |
Available mime types. When not defined - all mime types are allowed. |
uploadLimitIn |
FileSizeUnit |
<optional> |
Upload limit display e.g.: 'KB' (upper case) |
# OnDropZoneChange(files) → {void}
Parameters:
Name | Type | Description |
---|---|---|
files |
Array.<File> |
View Source admin-bro/src/frontend/components/design-system/molecules/drop-zone/drop-zone.tsx, line 214