When accepting file uploads, you often need to limit the file size before sending it to the server. The File object’s size property makes this straightforward.

Checking file size

The size property returns the file size in bytes. Here’s how to validate a maximum size of 3MB:

const input = document.querySelector('input[type="file"]')

input.addEventListener('change', (event) => {
  const file = event.target.files[0]
  
  if (!file) return
  
  const maxSize = 3 * 1024 * 1024 // 3MB in bytes
  
  if (file.size > maxSize) {
    alert('Maximum size allowed is 3MB')
    event.target.value = '' // Clear the input
    return
  }
  
  // File is valid, proceed with upload
  console.log(`File "${file.name}" is ${file.size} bytes`)
})

React example

<input
  name='image'
  type='file'
  accept='image/*'
  onChange={(event) => {
    if (event.target.files && event.target.files[0]) {
      if (event.target.files[0].size > 3 * 1000 * 1024) {
        alert('Maximum size allowed is 3MB')
        return false
      }
      setImage(event.target.files[0])
      setImageURL(URL.createObjectURL(event.target.files[0]))
    }
  }}
/>

Size conversion helpers

const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' bytes'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

// Usage
console.log(formatFileSize(file.size)) // "2.5 MB"

Client-side validation improves user experience by providing immediate feedback, but always validate on the server too since client-side checks can be bypassed.

Lessons in this unit:

0:	Introduction
1:	The File object
2:	FileList
3:	FileReader
4:	Blob
5:	FormData
6:	Accept only images in file input
7:	Check if checkbox is checked
8:	Reset a form
9:	File upload with server handling
10:	Drag and drop file upload
11:	▶︎ Validating file size before upload