DropZone
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. | |
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
import '@oliveai/ldk';
import { whisper } from '@oliveai/ldk';
import { File, WhisperComponentType } from '@oliveai/ldk/dist/whisper/types';
const onDrop = (error: Error | undefined, fileArray: File[]) => {
if (!error && fileArray.length > 0) {
console.log(fileArray[0].path);
}
};
const dropZone1: whisper.DropZone = {
accept: ['pdf'],
label: 'Upload files here',
limit: 2,
noun: 'PDFs',
onDrop: onDrop,
type: WhisperComponentType.DropZone,
tooltip: 'Accpets PDFs only',
};
const dropZone2: whisper.DropZone = {
label: 'DropZone with error',
noun: 'documents',
onDrop: onDrop,
type: WhisperComponentType.DropZone,
validationError: "There's a problem with this file upload",
};
const dropZoneExample = {
label: 'DropZone example',
components: [dropZone1, dropZone2],
};
whisper.create(dropZoneExample);
import * as React from 'react';
import '@oliveai/ldk';
import * as Renderer from '@oliveai/ldk/dist/whisper/react/renderer';
import { File } from '@oliveai/ldk/dist/whisper/types';
const DropZoneWhisper = () => {
const onDrop = (error: Error | undefined, fileArray: File[]) => {
if (!error && fileArray.length > 0) {
console.log(fileArray[0].path);
}
};
return (
<oh-whisper label="DropZone example" onClose={() => {}}>
<>
<oh-drop-zone
accept={['pdf']}
label="Upload files here"
limit={2}
noun="PDFs"
onDrop={onDrop}
tooltip="Accpets PDFs only"
/>
<oh-drop-zone
label="DropZone with an error"
noun="documents"
onDrop={onDrop}
validationError="There's a problem with this file upload"
/>
</>
</oh-whisper>
);
};
Renderer.renderNewWhisper(<DropZoneWhisper />);
Last modified 1yr ago