DropZone

Props:

Properties
Descriptions
Required
Default
accept
An array of strings that specifies what extensions the user can include.
NOTE: Do not include the dot in front of the extension.
label
Text displayed above the dropzone area.
limit
The number of files that can be selected. There is a hard limit of 10 as the maximum.
noun
If provided, replaces the word "files" in the component.
onDrop
Callback function that is called whenever a user selects or unselects a file.
tooltip
Text that appears when hovering over the component.
validationError
When provided, outlines the component in a red error state, and displays the value to the user as red text.
value
A File[] that can be used to reorder and remove the selected files from the component. To deselect all files, set it to an empty array. NOTE: You cannot add a file to the selection through this interface.

Example

DropZones give users that ability to upload a file, and a way for you to receive them. Any uploads can be passed back by the onDrop function as a File[] which is an internal Olive Helps type that provides a built in readFile() function.
The below example illustrates what some of the different properties change the rendering of the component when provided.
Typescript Example
React Example
1
import '@oliveai/ldk';
2
import { whisper } from '@oliveai/ldk';
3
import { File, WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
4
5
const onDrop = (error: Error | undefined, fileArray: File[]) => {
6
if (!error && fileArray.length > 0) {
7
console.log(fileArray[0].path);
8
}
9
};
10
11
const dropZone1: whisper.DropZone = {
12
accept: ['pdf'],
13
label: 'Upload files here',
14
limit: 2,
15
noun: 'PDFs',
16
onDrop: onDrop,
17
type: WhisperComponentType.DropZone,
18
tooltip: 'Accpets PDFs only',
19
};
20
21
const dropZone2: whisper.DropZone = {
22
label: 'DropZone with error',
23
noun: 'documents',
24
onDrop: onDrop,
25
type: WhisperComponentType.DropZone,
26
validationError: "There's a problem with this file upload",
27
};
28
29
const dropZoneExample = {
30
label: 'DropZone example',
31
components: [dropZone1, dropZone2],
32
};
33
34
whisper.create(dropZoneExample);
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as Renderer from '@oliveai/ldk/dist/whisper/react/renderer';
4
import { File } from '@oliveai/ldk/dist/whisper/types';
5
6
const DropZoneWhisper = () => {
7
const onDrop = (error: Error | undefined, fileArray: File[]) => {
8
if (!error && fileArray.length > 0) {
9
console.log(fileArray[0].path);
10
}
11
};
12
13
return (
14
<oh-whisper label="DropZone example" onClose={() => {}}>
15
<>
16
<oh-drop-zone
17
accept={['pdf']}
18
label="Upload files here"
19
limit={2}
20
noun="PDFs"
21
onDrop={onDrop}
22
tooltip="Accpets PDFs only"
23
/>
24
<oh-drop-zone
25
label="DropZone with an error"
26
noun="documents"
27
onDrop={onDrop}
28
validationError="There's a problem with this file upload"
29
/>
30
</>
31
</oh-whisper>
32
);
33
};
34
35
Renderer.renderNewWhisper(<DropZoneWhisper />);
Copied!
Copy link