JavaScript file upload size validation

Question

Is there any way to check file size before uploading it using JavaScript?

I just ran into a similar problem using Chrome. I just closed the tab and opened a new one. — bandito40, Jan 02 '23 at 13:50

score 430 · Accepted Answer · edited Mar 21 '23 at 17:12

Yes, you can use the File API for this.

Here's a complete example (see comments):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action="#" onsubmit="return false;">
    <input type="file" id="fileinput">
    <input type="button" id="btnLoad" value="Load">
</form>

Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.

+1 for the "all client-side limits (and other validations) can be circumvented". This is just as true for "native"/"compiled" database frontend applications. And don't put the database access passwords in your compiled code, not even "encrypted" (with a password that is in the code too - just saw this recently). — masterxilo, Jan 12 '18 at 12:13

score 142 · Answer 2 · edited Nov 25 '21 at 11:19

142

Using jquery:

$('#image-file').on('change', function() {
  console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">

  Upload image:
  <input id="image-file" type="file" name="file" />
  <input type="submit" value="Upload" />


</form>

edited Nov 25 '21 at 11:19

mplungjan

169,008
28
173
236

answered Nov 06 '12 at 11:21

Ben

1,537
1
10
6

3

@ipd, any chance of an IE8 fallback? (I'm hating myself for even mentioning IE) – Asher Apr 16 '15 at 11:51
2

This one works grate but does it works for multiple files also? – Ingus Aug 15 '17 at 08:01
7

It should be `MiB` if you calculate to the base of `1024`. – slartidan Jun 29 '18 at 14:25

score 137 · Answer 3 · edited Jun 07 '21 at 10:05

137

Works for Dynamic and Static File Element

Javascript Only Solution

function validateSize(input) {
  const fileSize = input.files[0].size / 1024 / 1024; // in MiB
  if (fileSize > 2) {
    alert('File size exceeds 2 MiB');
    // $(file).val(''); //for clearing with Jquery
  } else {
    // Proceed further
  }
}

<input onchange="validateSize(this)" type="file">

edited Jun 07 '21 at 10:05

Rohit Sharma

3,304
2
19
34

answered Jun 12 '17 at 17:24

Arun Prasad E S

9,489
8
74
87

2

Nice Answer. I was having the same problem but your solution worked for me :) – Dipankar Das Jul 13 '17 at 10:27
1

NB OP edited the post so the code is now correct, using the `size` property – UsAndRufus Sep 10 '18 at 14:06
1

Thanks for the answer I was almost doing the same but with one change. `$(obj).files[0].size/1024/1024;` But changed it to `obj.files[0].size/1024/1024;` – Shakir Baba May 11 '19 at 06:33
Is there a way for extend this for width and height validation? (leaving a "file" as the starting point and assuming it refers to an image) – jlmontesdeoca Sep 17 '19 at 16:52
@jlmontesdeoca I think you could read the file with the help of canvas and get it's height and width here itself. – Arun Prasad E S Sep 18 '19 at 01:36

score 29 · Answer 4 · edited Jun 07 '21 at 10:07

29

It's pretty simple.

const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

if (oFile.size > 2097152) // 2 MiB for bytes.
{
  alert("File size must under 2MiB!");
  return;
}

edited Jun 07 '21 at 10:07

Rohit Sharma

3,304
2
19
34

answered Apr 22 '16 at 14:37

Hasan Tuna Oruç

1,656
15
16

score 14 · Answer 5 · edited Jun 07 '21 at 10:08

14

If you're using jQuery Validation, you could write something like this:

$.validator.addMethod(
  "maxfilesize",
  function (value, element) {
    if (this.optional(element) || ! element.files || ! element.files[0]) {
      return true;
    } else {
      return element.files[0].size <= 1024 * 1024 * 2;
    }
  },
  'The file size can not exceed 2MiB.'
);

edited Jun 07 '21 at 10:08

Rohit Sharma

3,304
2
19
34

answered Apr 29 '13 at 09:10

Nikolaos Georgiou

2,792
1
26
32

Pekka · Answer 6 · 2012-11-18T15:24:43.003

14

No Yes, using the File API in newer browsers. See TJ's answer for details.

If you need to support older browsers as well, you will have to use a Flash-based uploader like SWFUpload or Uploadify to do this.

The SWFUpload Features Demo shows how the file_size_limit setting works.

Note that this (obviously) needs Flash, plus the way it works is a bit different from normal upload forms.

edited Nov 18 '12 at 15:24

answered Sep 15 '10 at 13:03

Pekka

442,112
142
972
1,088

score 14 · Answer 7 · edited Jun 07 '21 at 10:10

14

I made something like that:

$('#image-file').on('change', function() {
  var numb = $(this)[0].files[0].size / 1024 / 1024;
  numb = numb.toFixed(2);
  if (numb > 2) {
    alert('to big, maximum is 2MiB. You file size is: ' + numb + ' MiB');
  } else {
    alert('it okey, your file has ' + numb + 'MiB')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

edited Jun 07 '21 at 10:10

Rohit Sharma

3,304
2
19
34

answered Aug 30 '18 at 21:55

kibus90

315
2
11

This says javascript, JQuery is not in the tags – Hello234 Feb 29 '20 at 02:15

score 10 · Answer 8 · edited Nov 25 '21 at 11:22

Even though the question is answered, I wanted to post my answer. Might come handy to future viewers.You can use it like in the following code.

document.getElementById("fileinput").addEventListener("change",function(evt) {
  //Retrieve the first (and only!) File from the FileList object
  var f = evt.target.files[0];
  if (f) {
    var r = new FileReader();
    r.onload = function(e) {
      var contents = e.target.result;
      alert("Got the file\n" +
        "name: " + f.name + "\n" +
        "type: " + f.type + "\n" +
        "size: " + f.size + " bytes\n" +
        "starts with: " + contents.substr(1, contents.indexOf("\n"))
      );
      if (f.size > 5242880) {
        alert('File size Greater then 5MiB!');
      }


    }
    r.readAsText(f);
  } else {
    alert("Failed to load file");
  }
})

<input type="file" id="fileinput" />

upvoted just because you made me save 5 minutes of calculating how many bytes 5 MB is ;-) — David Fariña, Mar 04 '21 at 13:35

score 3 · Answer 9 · answered Jul 26 '13 at 18:22

I use one main Javascript function that I had found at Mozilla Developer Network site https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, along with another function with AJAX and changed according to my needs. It receives a document element id regarding the place in my html code where I want to write the file size.

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

Cheers

score 3 · Answer 10 · edited Jun 07 '21 at 10:11

3

JQuery example provided in this thread was extremely outdated, and google wasn't helpful at all so here is my revision:

<script type="text/javascript">
  $('#image-file').on('change', function() {
    console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
  });
</script>

edited Jun 07 '21 at 10:11

Rohit Sharma

3,304
2
19
34

answered Aug 10 '17 at 17:48

nodws

1,018
14
18

score 2 · Answer 11 · answered Sep 08 '20 at 06:46

2

I ran across this question, and the one line of code I needed was hiding in big blocks of code.

Short answer: this.files[0].size

By the way, no JQuery needed.

answered Sep 08 '20 at 06:46

RedDragonWebDesign

1,797
2
18
24

score 2 · Answer 12 · answered Jan 15 '22 at 13:32

I use this script to validate file type and size

 var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"];

    function validateForSize(oInput, minSize, maxSizejpeg) {
        //if there is a need of specifying any other type, just add that particular type in var  _validFilejpeg
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFilejpeg.length; j++) {
                    var sCurExtension = _validFilejpeg[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
                        .toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {
                    alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", "));
                    oInput.value = "";
                    return false;
                }
            }
        }

        fileSizeValidatejpeg(oInput, minSize, maxSizejpeg);
    }

    function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) {
        if (fdata.files && fdata.files[0]) {
            var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0.
            //alert(fsize)
            if (fsize > maxSizejpeg || fsize < minSize) {
                alert('This file size is: ' + fsize.toFixed(2) +
                    "KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB ");
                fdata.value = ""; //so that the file name is not displayed on the side of the choose file button
                return false;
            } else {
                console.log("");
            }
        }
    }

<input type="file"  onchange="validateForSize(this,10,5000);" >

score 1 · Answer 13 · edited Jun 04 '19 at 14:31

1

You can try this fineuploader

It works fine under IE6(and above), Chrome or Firefox

edited Jun 04 '19 at 14:31

backpackerhh

2,333
1
18
21

answered Sep 20 '12 at 08:47

anson

67
1
6

3

Fine Uploader is not able to validate file size in IE9 and older as the do not support the File API is not supported. IE10 is the first version of Internet Explorer that supports the File API. – Ray Nicholus Nov 17 '12 at 18:09

score -2 · Answer 14 · answered Jul 31 '13 at 13:54

If you set the Ie 'Document Mode' to 'Standards' you can use the simple javascript 'size' method to get the uploaded file's size.

Set the Ie 'Document Mode' to 'Standards':

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Than, use the 'size' javascript method to get the uploaded file's size:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

It works for me.

This will not work in IE9 or older, no matter what meta tags you add. — Ray Nicholus, Jul 31 '13 at 14:27

MD SHAYON · Answer 15 · 2021-04-23T11:55:35.447

-2

Simple way is

const myFile = document.getElementById("fileUpload").files[0]; 
            if (myFIle.size > 2097152) // 2 MiB for bytes.
            {
                alert("File size must under 2MiB!");
                return;
            }

edited Apr 23 '21 at 11:55

answered Apr 20 '21 at 09:01

MD SHAYON

7,001
45
38

JavaScript file upload size validation

15 Answers15

Linked

Related