Input - File Dropzone

Known issues
Show details
Known issues
Published: May 22, 2023
Updated: March 24, 2024

Overview

The File Dropzone input enables marketers to upload files to the Iterable platform by dragging and dropping files or by browsing their device.

Design

Structure

🟢 Drop zone / State=Default

🟢 Drop zone / State=Default

  • Drop Area: The main interactive zone where files can be dragged and dropped.
  • Text Prompt: Instructions or guidance for the marketer to either drag and drop or browse to upload.
  • File description: text below the input that indicates the types of files that are accepted. (note: this is replaced with the filename once uploaded)
  • Browse Button: Allows marketers to manually select files from their device through a file picker dialog.

Variants

  • Single File Upload: Accepts a single file at a time.
  • Multiple Files Upload: Allows for multiple files to be selected and uploaded simultaneously. (component coming soon—reference Creative library upload for a live example)

States

🟢 Drop zone / State=Default

🟢 Drop zone / State=Default

🟢 Drop zone / State=Hover

🟢 Drop zone / State=Hover

🟢 Drop zone / State=Error

🟢 Drop zone / State=Error

🟢 Drop zone / State=Uploaded

🟢 Drop zone / State=Uploaded

 

Guidelines

Use cases

  • Marketing Campaigns: Uploading assets like images or CSV files for contact lists.
  • Content Management: Adding downloadable resources or media to content libraries.
  • Configuration Files: Importing settings or data for platform configuration.

Example

Example

Example

 

  • Clearly indicate supported file types and size limits.
  • Provide immediate feedback on the file upload status.
  • Allow easy removal or replacement of selected files before submission.
  • Use technical jargon without explanations.
  • Allow the upload of unsupported file formats without clear error messaging.
  • Make the drop zone too small, making it hard to target.

Content

  • Instructions: Offer clear, concise instructions within the drop area.
  • Feedback: Provide real-time feedback on the status of the file upload process.
  • Error Messages: Use understandable language to explain why an upload failed and how to resolve it.

Accessibility

  • Keyboard Navigation: Ensure the component and its functions are fully operable with a keyboard.
  • Screen Reader Support: Use ARIA roles and properties to ensure screen readers accurately describe the drop zone, actions, and status messages.
  • Focus Indicators: Implement visible focus indicators for the drop zone and browse button to aid those navigating by keyboard.
  • Error Identification: Clearly associate error messages with the file input, making it easy for users relying on assistive technologies to identify and correct errors.

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Known issues