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 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

 

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

 

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