File Uploader

Design System - File Uploader component

The File Uploader component allows users to easily upload documents and images through drag-and-drop, browse, or click actions. Built with accessibility and clarity in mind, this component ensures seamless interaction, feedback on file status, and visual clarity. It accommodates various upload needs like single, multiple, or preview-based, with consistent interaction feedback.

// Sample code

  <CheckBox
    label="Label"
    onChange={(e)=>{console.log(e.target.checked}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

Anatomy

Variants

Uploader Field

A compact file upload input paired with an action button. Best suited for single file uploads in form layouts.

Uploader Widget

A more interactive drag-and-drop style uploader. Useful when multiple files need to be uploaded or where visual cues are important.

Image Upload

A visual first variant designed to upload and preview images. Users can click to add, preview thumbnails, or remove images directly.

Interaction States

Hover State for Multiple Image Load

When the user hovers over the field or an item, it highlights to indicate interactivity and help the user discover selectable areas.

Mouse Down State for Multiple Image Load

When the user performs a mouse-down action on the Image Upload area, a contextual menu appears offering multiple options for uploading. This menu typically includes:  Camera – Opens the device’s camera to capture and upload a new image instantly. My Files – Opens the file explorer or gallery to choose existing images from the device.  This interaction provides flexibility and enhances the upload experience, especially on mobile devices or when real-time photo capture is required.

Properties

Single Upload

Allows only one file to be uploaded at a time. Automatically replaces existing files.

Multiple Upload

Enables uploading of several files. Each file is shown with a re-upload and download option.

Error

Displays error messages per file or globally. Indicates upload failure, unsupported format, or size limit.

Label

Each uploader can have a custom label to define the upload purpose clearly.

Actions

Includes an option to upload using the “device camera” and “my files” options, only applicable for the image upload variant.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property

Value

Default

variant

text

multiple

text

onUpload

yes/no

validations

yes/no

removeTargetedFile

number

showHint

yes/no

showLabel

yes/no

additionalElements

yes/no

showErrorCard

number

iserror

yes/no

showDownloadButton

text

showReUploadButton

yes/no

customClass

yes/no

disabled

yes/no

style

yes/no

extraStyles

yes/no

disabledButton

yes/no

textStyles

yes/no

buttonType

yes/no

showAsTags

yes/no

showAsPreview

yes/no

inline

yes/no

label

yes/no

Behaviours

Drag & Drop Support

Uploader Widget allows users to drag and drop files into the designated area.

Usage Guide

Allow to preview uploaded files

Provide a thumbnail or preview option for the uploaded images. This helps users verify that they uploaded the correct file before submitting it.

Avoid using generic error messages like "Upload failed" without explanation. Users need to know why their file wasn't accepted and what they should do next.

Changelog

Date

Number

Notes

Dec 15, 2024

v-0.0.2

This component is added to the website. This component is now individually versioned.

Design Checklist

PreviousDropdown - Multi Select NextTimeline

Last updated 2 days ago

Was this helpful?