File Upload UI Design

The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing space-y-3 (12px), px-6 (24px), py-8 (32px), mt-1 (4px), p-3 (12px), mt-2 (8px), constrained by max-w-md and w-2/3. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.

Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.

A job applicant reaches the documents step. The drop zone says 'Drop files here or browse. PDF or DOCX up to 10 MB.' She drags in her CV and a portfolio PDF. Each file appears in a list with its size and a progress bar that fills smoothly.

The portfolio is 18 MB, so only that file shows an error: 'portfolio.pdf is 18 MB. The limit is 10 MB.' Her CV continues uploading normally. She compresses the portfolio, uploads it again, and both files show as complete with options to remove or replace. On her phone, the same step offers a clear button that opens the file picker, including cloud storage.

Design and media tools support large files, drag and drop from the desktop and previews of images and video.

Job applications and forms accept a small number of documents, with strict type and size limits.

Chat and email use inline attachments, often with paste-from-clipboard support for screenshots.

Drop zones are usually at least 120 to 200px tall with a dashed or tinted border and a clear instruction in the center. Use a strong highlight color on drag-over. In file lists, show name, size, progress and actions on one row, with progress bars that fill the full track and keep stable rounded ends.

On mobile, drag and drop is rare. Show a clear button that opens the file picker or camera, and use the accept attribute so only valid file types appear. Large uploads on mobile networks need visible progress and resumable uploads where possible.

Use a real input type="file" with a visible label, and the accept attribute for allowed types. Validate size and type on the client for quick feedback and on the server for security. For large files, use chunked or resumable uploads and show progress from the upload request.

In a design system, file upload combines a drop zone, a file list item with progress, and error and success states. Keep the progress bar consistent with the rest of the system, define a single place for file-type and size messaging, and expose events for upload, cancel and retry so each product team does not reinvent them.

Track upload success rate, common error types and average upload time. Frequent size or type errors mean limits should be clearer or more generous.

Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:

State limits upfront in plain language: 'PNG, JPG or PDF up to 20 MB'. Error messages should name the file and the fix: 'portfolio.mov is 120 MB. The limit is 50 MB.' Use 'Upload' for the action and 'Uploading...' for the process.

If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:

Upload progress follows the same rules as loading states, errors follow error message design, and completed uploads often trigger toast notifications.