File Input
The File Input component allows users to select and upload files from their local device, facilitating seamless file uploads and enhancing the overall user experience.
Introduction
The File Input component is an essential part of modern web forms, enabling seamless file uploads and enhancing the overall user experience. By integrating this component into your web application, you empower users to easily share files and data, enabling various use cases like document submissions, profile picture uploads, and more.
Visual representation
The following element is a visual representation of the file input component which would ideally be used within a form element.
Code structure
This is the basic code structure of how a file input element has to be created. This code structure is inherited from the common use of this components.
<div class="aegov-form-control aegov-file-input-control">
<label for="file-uploader-01" class="file-input-label">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="file-summary w-5 h-5"><rect width="256" height="256" fill="none"/><line x1="128" y1="152" x2="128" y2="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M216,152v56a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="88 80 128 40 168 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Upload file
</label>
<input type="file" name="file-uploader-01" id="file-uploader-01">
</div>
The default file upload input element is actually hidden. The label is styled as the button to trigger the file input element. When structured in this way, the UI of the native element is not displayed. Styling the button gives you more control over it's look. Applying the button look to this makes it consistent with the UI.
Variations
Variations are different versions of this component that you may use within your website. The choice of what variation to use should be based on the user experience study and layout design applied to the page of your website.
With single image feedback
This variation presents a custom-designed icon and button user interface (UI) that provides a visually appealing way to interact with certain actions or functionalities. While it does not function as a file input, it enhances the user experience by offering an intuitive and attractive design that can be utilized for various purposes within the application. The custom icon and button combination can be easily integrated into different parts of the application's interface, adding a touch of interactivity and style.
with a drag/drop UI
In this variation, the File Input component incorporates a drag-and-drop user interface, enabling users to simply drag files from their computer and drop them onto the designated area for quick and convenient file uploads.
Default UI
The default UI is also available. In many cases, you may have no control over the custom HTML output of the file input element. Hence, as a backup, the default UI is also available under the design system.
As much as possible, you must aim to use the button based approach and not the default UI.
The default file input sizes variation provides three size. These classes allow customization of the label font size and file input dimensions to suit specific design requirements.
| Class | Properties |
|---|---|
.control-sm |
height: 2.5rem /* Element height 40px */font-size: 0.85rem /* 14px */ |
.control-base |
height: 3rem /* Element height 48px */font-size: 1rem /* 14px */ |
.control-lg |
height: 3.5rem /* Element height 56px */font-size: 1.125rem /* 18px */ |
Use of secondary colour
All form elements in the UAE Design System support the use of secondary colour.
Here is an example of the button element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.
Behaviour
When users interact with the File Input component, a file selection dialog specific to the user's operating system will open, allowing them to browse and choose the desired file. Once a file is selected, it can be used for further processing, such as uploading to a server, processing data, or displaying previews.
State
By default, the ` hover ` and ` focus ` state of a file input has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.
Disabled state
By adding a ` disabled ` attribute to a file input, you will essentially tell the browser that the file input is unusable. Disabled state for a file input would render it visually lighter. Add the ` aria-disabled="true" ` attribute to file which is disabled as well as an added measure for assistive technologies.
Accessibility
To ensure accessibility, make sure to associate the label element with the File Input using the "for" attribute. This enables screen readers to provide clear instructions to users and enhances the overall usability of the component for individuals with disabilities.
By adhering to accessibility best practices, you can create an inclusive and user-friendly component that caters to all users, including those with disabilities.
Responsive element
This component can be resized based on breakpoint prefixes.
You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com
Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.
By applying the ` control-sm `, the ` md:control-base ` and ` 2xl:control-lg ` classes, the File Input dimensions adjust to different screen sizes, ensuring optimal visibility and usability.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
The file input can be an essential form element and very useful in many use cases where you may want the user to upload documents or a file.
Uploading a document or a file is a a process of engagement involving information exchange. It empowers users to securely submit necessary documents, forms, and evidence, fostering transparency and efficiency in the processes.
Where to use a file?
- Accepting upload documents that may be considered proof or evidence that is currently not available from other sources.
- To ask users to upload documents as validation methods for a process.
- To ask for documents that may be necessary to complete a process that may not be available elsewhere.
- For the purpose of creating a new account and receive documents that have never been submitted before.
- Update a user's or company account with necessary documentation which may have had a physical change - such as attested documents.
- To upload a media element, such as a profile picture.