File upload forms are an essential part of many websites and applications. However, to ensure an optimal and secure user experience, it is essential to perform client-side validations. Below I show you how you can create a file upload form with effective client-side validations.
The Fundamentals of Input Type=file
Before we dive into creating upload forms with validations, let's better understand the HTML element that makes file uploads possible: . This input allows users to select a file from their device to be sent to a server or manipulated directly with JavaScript.
Client Side Validations
By performing client-side validations, you improve immediate feedback to the user and reduce server load. Common validations include:
- Check file type: Make sure the file corresponds to the accepted types (for example, images or documents).
- Limit file size: Prevent users from uploading very large files that may affect loading speed or exceed server resources.
- Number of files: In cases where uploading more than one file is allowed, you can limit this number to maintain control.
Checking File Type
The attribute accept The file input helps filter the files that users can select. For example, if you only want images, you can do:
For more detailed control, it is possible to specify extensions or MIME types:
Limiting File Size
Validating the size of the selected file is done through JavaScript before submitting the form:
document.getElementById('file').addEventListener('change', function() { var fileSize = this.files[0].size / 1024 / 1024; // size in MB if (fileSize > 5) { alert ('File must not exceed 5MB'); this.value = '' // Reset the file field } });Managing Multiple Files
If you allow multiple file uploads, you can add the attribute multiple and then iterate over them to apply the validations:
document.getElementById('file').addEventListener('change', function() { var files = this.files; var totalFiles = files.length; if(totalFiles > 5){ alert('You can only upload one maximum of 5 files.'); this.value = ''; } for(var i = 0; i < totalFiles; i++) { // Type and size validations can be performed here for each file } } );User Experience Improvements
It is crucial to provide clear and accurate feedback. Instead of a simple alert, how about we show a message on the same page? Something like this:
var errormessage = document.getElementById('errormessage'); if(fileSize > 5) { errormessage.textContent = 'The file must not exceed 5MB'; this.value = ''; } else { errormessage.textContent = ''; }Likewise, you may want to style your input file for better integration with your design. Here's an example using a little CSS:
.input-file { opacity: 0; width: 0.1px; height: 0.1px; position: absolute; z-index: -1; } .input-file + label { color: white; background-color: black; display: inline-block; cursor: pointer; padding: 8px 20px; } .input-file:focus + label, .input-file + label:hover { background-color: red; }Good Security Practices
While client-side validations improve UX, they are not foolproof. Malicious users can modify behavior on the client side. Therefore, it is always crucial to validate again on the server side. You can learn more about how to secure your forms in my article on security in web forms.
Doubts or Queries?
Creating a secure and easy-to-use file upload form doesn't have to be complicated. Remember that a good user experience begins with an intuitive interaction and ends with security in sending and receiving data. For personalized advice or to discuss your project further, please feel free to contact me.
By using these client-side validation techniques, you will achieve more robust and user-friendly upload forms. This will not only make your users more satisfied, but will also strengthen trust in your website or app.
English 
Spanish