How can I get a file's upload size using simple Javascript?

Question

I have upload file functionality on one of the page. I check for the extension of the file using JavaScript. Now i want to restrict the user from uploading file greater than 1 MB. Is there any way i can check the file upload size using JavaScript.

My code currently look like this:

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>

see http://stackoverflow.com/questions/547292/how-to-retrieve-size-of-file — geowa4, Oct 22 '09 at 12:27
Why accept a wrong answer? Check the second answer = it is possible! — , Nov 08 '12 at 08:41
@PankajKhurana — When you accepted an answer five years ago, the answer you chose was correct. Today that is no longer the case, could you return to this question and change the accepted answer to a modern one please? — Quentin, Sep 30 '14 at 20:52

score 28 · Answer 1 · answered Mar 19 '10 at 04:00

See http://www.w3.org/TR/FileAPI/. It is supported by Firefox 3.6; I don't know about any other browsers.

Within the onchange event of a <input id="fileInput" type="file" /> simply:

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

You can also return the contents of the file as a string, and so forth. But again, this may only work with Firefox 3.6.

Anoop · Answer 2 · 2013-04-23T08:01:48.530

Now it is possible to get file size using pure JavaScript. Nearly all browser support FileReader, which you can use to read file size as well as you can show image without uploading file to server. link

Code:

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

You can get file size directly from file object using following code.

 var fileSize = oFile.size;

score 2 · Answer 3 · answered Apr 02 '13 at 17:11

2

Most of these answers are way out-of-date. It is currently possible to determine file size client-side in any browser that supports the File API. This includes, pretty much, all browsers other than IE9 and older.

answered Apr 02 '13 at 17:11

Ray Nicholus

19,538
14
59
82

score 2 · Accepted Answer · answered Oct 22 '09 at 12:26

2

Other that aquiring the filename there is no way for you to find out any other details about the file in javascript including its size.

Instead you should configure server-side script to block an oversized upload.

answered Oct 22 '09 at 12:26

AnthonyWJones

187,081
35
232
306

2

Also, even if you could you'll want a server-side check anyway, since there's nothing to stop malicious users writing their own form that posts to the same place. – Dominic Rodger Oct 22 '09 at 12:29
2

@DominicRodger I agree that you’d have to check the file size on the server-side for security. But for convenience (which I think is what the OP was going for), it’s better to let the user know beforehand that their 1 GiB file won’t be accepted instead of telling them after having had to wait for the file to upload. – Raphael Schweikert Dec 14 '12 at 14:45

score 0 · Answer 5 · answered Dec 14 '12 at 14:39

See here:

http://www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

As to all the people saying this has to be done server side, they are absolutely spot on it does.

In my case though the maximum size I will except is 128Mb, if a user tries to upload something that is 130Mb they should not have to wait the 5 minute upload time to find out it is too big so I need to do an additional check before they submit the page for usability sake.

score 0 · Answer 6 · answered Oct 22 '09 at 12:27

0

It might be possible using a lot of browser-specific code. Take a look at the source of TiddlyWiki, which manages to save itself on the user's hard drive by hooking into Windows Scripting Host (IE), XPCOM (Mozilla), etc.

answered Oct 22 '09 at 12:27

Anthony Mills

8,676
4
32
51

score 0 · Answer 7 · answered Oct 22 '09 at 12:27

I don't think there is any way of doing that with plain JS from a web page.
With a browser extension maybe, but from a page javascript cannot access the filesystem for security reasons.

Flash and Java should have similar restrictions, but maybe they are a bit less strict.

score 0 · Answer 8 · answered Oct 22 '09 at 12:29

0

not possible. would be a major security concern to allow client side scripts to run that can read file info from and end users hard drive.

answered Oct 22 '09 at 12:29

Alex H

733
4
8

1

This is supported in Firefox 3.6. See HTML 5's . I've used that module, and it works great for uploading via AJAX without needing any sort of Flash objects or iframe trickery. – Matthew Mar 19 '10 at 04:01

score 0 · Answer 9 · answered Jan 12 '21 at 15:15

I had the same issue, Here's a simple JavaScript snippet worked for me. Adding for future googlers.

HTML

<input type="file" name="photo" id="photo" accept="image/*">

JS

const file = document.getElementById('photo');
// Show KB (add one more /1024 for MB)
const filesize = file.files[0].size / 1024; 

if (filesize > 500) { // Alert greater than 500kb 
    console.log(filesize);
    alert('Please upload image less than 500 KB');
    return;
}

How can I get a file's upload size using simple Javascript?

9 Answers9

Linked

Related