File Upload - UI Element

File upload components are UI elements that allow users to upload content from their devices. 

File uploads are usually found in forms, but they also appear in chats, dialogs, modals, and other sections where users are required to upload files or attachments. They can also be standalone elements that work individually on a user interface. File upload components are triggered by clicking on it to upload. But for a better user experience, they should also be drag-and-drop. 

‍

File upload UI components can be presented in three ways, depending on the available space and the design goals of the user interface. 

1. Input Only

When there is limited space – especially on mobile screens – a simple file input field can be used. This type of file upload component is represented by a text input box and a “Browse Files” or “Choose File” button. 

2. Drag And Drop Add-On

With drag-and-drop add-on file upload, users can drag files from their device and drop them into the designated area within the interface. This has the same format as the “Input Only” type but with the addition of the possibility of a drag and drop feature. This is more suitable for larger screens – such as laptop or desktop screens. 

3. Drag and Drop Area Only

This can be used when the main focus is on uploading files. This file upload type can be used without an input field. Make sure the elements within the file upload are intuitive so that the user knows what to do.

‍

‍

1. Anatomy

The anatomy of the file upload UI component typically contains:

• Input field
• Button
• Drag and Drop

2. Size and Styling

Use icons relevant to the files expected from the users. The icon and text weight should be similar – don’t use a bold icon next to a light text label. Make sure to maintain consistent spacing on all sides – the line height of a typeface should not exceed the height of the actual characters. 

3. Status

The input field of the file upload component has five status properties: none, done, warning, error, and loading. 

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find file uploads and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍