# Uploading media — Flows

Source: https://www.checklist.design/flows/uploading-media

## Items

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

## License for the Checklist Design collection

Checklist Design collection: https://github.com/Checklist-Design/skills
Snapshot: bfae71e507b1b7c03c12e0756402b60eb80f5d14 · Imported: 2026-11-12
Republished under the MIT License. Original checklist text belongs to Checklist Design.

MIT License

Copyright (c) 2026 Checklist Design

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.