LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Example

Was this helpful?

  1. Whisper Components

DropZone

PreviousDividerNextEmail

Last updated 3 years ago

Was this helpful?

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.

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