File Uploads

What is a file upload component?

A file upload component lets users select files from their device and send them to your application. Beyond the plain file input, this category covers drag-and-drop zones, image upload with previews, multiple file lists with progress bars, and avatar upload controls. You find them in profile settings, support forms, document portals and content management systems.

When to use each pattern

• Simple file input for occasional single uploads in a form.
• Drag-and-drop zone when users often upload several files at once from the desktop.
• Image preview for avatars, product photos and anything where users need to confirm the right image.
• Progress list for large files or multiple uploads that take time.

Best practices

• Always keep a real <input type="file"> behind the design, so keyboard users and mobile users can open the system picker. Drag and drop should be an enhancement, never the only way.
• Label the control clearly and state limits up front: accepted formats, maximum size and number of files.
• Use the accept attribute to filter file types and multiple when more than one file is allowed, but always validate on the server as well.
• Show each selected file with its name, size and a remove button labelled "Remove filename".
• Announce errors and completion with a live region, and use the <progress> element or role="progressbar" for upload progress.
• Make the drop zone large and give it a clear highlighted state while a file is dragged over it.
• Create image previews with URL.createObjectURL and release them afterwards to save memory.

Framework versions

The drag and drop file upload examples here include drop zones, image previews, file lists and avatar uploaders. Bootstrap 6 versions use theme-* colour roles for active and error states and ES module scripts. Bootstrap 5 versions build on .form-control file inputs with small vanilla JavaScript, Tailwind CSS versions use dashed borders and state utilities, and pure CSS versions style the native input. Preview them live, copy the HTML, CSS and JS, and connect the upload to your own endpoint.