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
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 />);

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.

Last modified 1yr ago