File Upload Forms: Guide with Client Validation

File upload forms are an essential tool in many web applications. They allow users to upload documents, images and other files easily. However, to ensure an optimal user experience (UX), it is crucial to implement client-side validations. By doing so, we enhance the usability and security of our applications, in addition to providing instant feedback, avoiding unnecessary loads on the server.

How to Create a File Upload Form?

To start, we create an HTML form that includes a field for file selection. This is achieved using the element with the attribute type Assigned to files. Here is a basic example of what a simple file upload form would look like:

Select a file: Upload file

By incorporating the attribute name, we allow the server to correctly identify the file sent for processing. However, before we get to that point, let's dive into client-side validation techniques to improve user experience.

Client Side Validations – For Better UX

File Type Validation

One of the most common validations is to ensure that the file type is supported by our application. We can limit the acceptable file types by adding the attribute accept to the input of type file. For example, to accept only images in JPEG and PNG format:

Still, this restriction is not entirely secure, it is possible for users to bypass this restriction on the client side. Therefore, it is essential to validate the file type using JavaScript. This can be done by evaluating the property type of the selected file, which can be accessed using the event change from the field input this way:

document.getElementById('file-upload').addEventListener('change', function(e) { const file = e.target.files[0]; const validTypes = ['image/jpeg', 'image /png']; if (!validTypes.includes(file.type)) { alert('Unallowed file type.'); e.target.value = '' // Reset the input } } );

File Size Validation

Another important aspect is to validate the file size. This is essential to prevent the upload of files that are too large that could overload the server or violate the file size policies of our service. With JavaScript we can do it like this:

document.getElementById('file-upload').addEventListener('change', function(e) { const fileSize = e.target.files[0].size; const maxAllowedSize = 5 * 1024 * 1024; // 5MB in bytes if (fileSize > maxAllowedSize) { alert('File exceeds maximum allowed size.');

Combining Validations and User Feedback

For a highly refined user experience, we combine validations and provide immediate feedback. For example, we can use an element <span> to display error messages near the file input field. This is friendlier than a simple alert:

<span id="file-upload-feedback"></span>

And in our JavaScript we would add:

document.getElementById('file-upload').addEventListener('change', function(e) { const file = e.target.files[0]; const feedbackElement = document.getElementById('file-upload-feedback&#039 ;); // File type and size validations const validTypes = ['image/jpeg', 'image/png']; const maxAllowedSize = 5 * 1024 * 1024; // 5MB in bytes feedbackElement.textContent = &#039 ;'; // Clear previous messages if (!validTypes.includes(file.type)) { feedbackElement.textContent = 'Unallowed file type.'; e.target.value = ''; if (file.size > maxAllowedSize) { feedbackElement.textContent = 'The file exceeds the maximum allowed size.'; e.target.value = ''; uploaded.'; } feedbackElement.style.display = feedbackElement.textContent ? : 'none'; });

We add appropriate CSS styles to the feedback element so that the message is clearly visible and harmonizes with the overall design of the page. We could also consider using libraries like Bootstrap to visually improve the presentation of these messages.

Processing File Uploads with Improved UX

Once the user has selected a valid file, and before the form is submitted, we could implement a progress bar to further improve the UX. Using XMLHttpRequest o Fetch API along with events progress We could provide real-time feedback on file upload status.

In case you want to improve your web design and development skills in general, I recommend exploring the resources and tutorials available on NelkoDev. Additionally, if you have specific questions or would like to learn more about how to implement advanced features in file upload forms, feel free to contact me at Contact NelkoDev.

By implementing client-side validations in our file upload forms, we not only provide a better user experience but also increase the robustness and security of our applications, ensuring that the data received corresponds to what we really expect to handle in the backend.