Flow
Steps
Reset
Empty state
Show a clear visual placeholder with an upload icon and simple text that indicate a file can be dropped into the area to upload.
It’s also suitable to offer a click to upload route incase a user prefers that option.
Drag and drop interaction
When a file is across the interaction canvas, there should be a clear visual state change to indicate it has detected a file attempting to be dropped. This lets the user know it’s safe to release the file at this point.
Progress indicator
Display progress that updates in real-time so users know their upload is working. If a percentage is not possible to show, a loading indicator can at least show that something is happening.
Include file names and show overall progress when uploading multiple files to keep users informed throughout the process.
File restrictions & constraints
Clearly state limits to what files can be uploaded. This is commonly file size and format, shown in the upload area before users attempt to upload files.
If a user tries to upload a file outside the constraints, an error message should show explaining it does follow the constraints.
Outcome status
Use visual indicators like green checkmarks for successful uploads and red warning icons for failures. For failures, include an error message explaining what went wrong and what users can do to fix it.
Upload actions
Ways to interact with an upload. Choose which actions to show by default vs on hover based on available space, aiming to avoid overwhelming users with too many visible options.
Common actions include:
Retry failed uploads
Cancel upload in progress
Delete files
Rename files
Showing multiple uploaded files
Display files in a clean list or grid with thumbnails when possible, and ensure the layout you choose is scalable.
What information you show about each file depends on the context of the upload. A file name or size can be relevant in one case, while seeing the images uploaded can be the relevant detail in another.
