Javascript file upload size validation

javascript

file-upload

validation

best-practices

byAnton Shumikhin·Jan 20, 2025

To validate file size via JavaScript, access the size attribute of your input element's first file. Here's the core code:

let input = document.querySelector('input[type="file"]');
input.onchange = () => {
  let file = input.files[0];
  // When the file size exceeds 2MB, show alert.
  if (file.size > 2 * 1024 * 1024) {
    alert('File size must have been trained by Arnold Schwarzenegger, because it\'s too large!');
  } else {
    // File is a good sport, proceeds to upload
  }
};

Change 2 * 1024 * 1024 to suit your file size limit.

Richer code examples and broader scenarios

Implementing file-size validation

In order to implement a fool-proof file size validation, always ensure that:

File size checking is abstracted to a separate function for reusable, clear-cut, and modular code.
File size is presented in user-friendly format like KiB, MiB, or GiB.
Your message semantics is properly structured to convey the exact reason when a file can't be uploaded.

Enhancing user interaction

Delight your users by crafting a validation that smoothly interacts with them. Achieve this by:

Dynamically clearing invalid inputs and simultaneously informing the users about this action.
Preventing form submission when the file size isn't in the allowed limit, this ensures server stability.
Creating a negative feedback on validation errors to alert users of an unsuccessful upload attempt.

###Creating customizable validation

Get flexible with your validation by:

Seamlessly integrating with pre-existing validation libraries like $.validator.
Implementing custom validation features (stricter and personal) based on criteria such as file type, usage context, etc.

A deep-dive into file optimization

When dealing with a large number of files or large-sized files, you could:

Defer or restrict the frequency of event handlers to prevent rigorous processing.
Read large files in chunks to prevent bloating your browser memory.
Run the file processing in Web Workers to keep the UI responsive.