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 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=Hover
🟢 Drop zone / State=Error
🟢 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
Do
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.
Don't
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