9

How can I validate the file size on the client side using JavaScript? I am using type=file for selecting the file

RRikesh
  • 14,112
  • 5
  • 49
  • 70
NewDev
  • 109
  • 1
  • 1
  • 5

3 Answers3

13

UPDATE 2013 as of this edit, the File API is supported in all major browsers, and in IE as of version 10

http://caniuse.com/#search=file%20api

You may still wish to use SWFUpload if you still need to support IE9 and under, though at this point it should probably be more of a fallback, since the html5 file api has support on mobile platforms where SWFUpload cannot reach. The html5 file api is based on firefox's file api as noted below.

See also this duplicate question Client Checking file size using HTML5?

UPDATE: Firefox has changed their API to this https://developer.mozilla.org/en/DOM/FileReader

You can do it in firefox like so

html:

<form action="" method="get" accept-charset="utf-8">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue &rarr;"></p>
</form>

javascript:

var filesize = document.forms[0].file.files[0].fileSize

if there's a way to do this in IE, I don't know it. It probably involves activeX or some other such rubbish.

edit: I found this here, HOW TO DO THIS IN IE

<head>
<script>
function getSize()
{
 var myFSO = new ActiveXObject("Scripting.FileSystemObject");
 var filepath = document.upload.file.value;
 var thefile = myFSO.getFile(filepath);
 var size = thefile.size;
 alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
Community
  • 1
  • 1
Breton
  • 15,401
  • 3
  • 59
  • 76
  • +1 While this is a good approach (using Javascript which the original question was about), you're really just making a solution for two browsers. Of course, these are two of the most popular browsers, but if you need multiple browser/platform support, it might prove quite difficult to implement. – Sune Rievers Dec 02 '09 at 12:15
  • 4
    Javascript cannot be a replacement for checking the filesize on the server. If the goal is simply to save some resources, then that goal is possible, I think. – Breton Dec 02 '09 at 12:19
  • I agree completely Breton, you should always check the file serverside if you REALLY want to be sure. That could for example include checking dimensions of an uploaded image, or to prevent animated gifs to be uploaded (or at least saved). When dealing with clientside code like Javascript, the client can never be 100% trusted. – Sune Rievers Dec 02 '09 at 12:26
  • I didn't know the browser exposed that kind of information. Interesting. – Kaze no Koe Dec 02 '09 at 14:18
  • 4
    This answer needs a lot of caveats to be useful in general. 1) IE needs the site to be inserted into the "Trusted Sites" list for this to not error out. If you're going to copy/paste stuff off some other page, do a little research first 2) this was only introduced in FF3 3) and `fileSize` has already been deprecated (https://developer.mozilla.org/en/DOM/File) – Crescent Fresh Dec 02 '09 at 14:39
  • Looks like they deprecated fileSize and replaced it with size, which does exactly the same thing. THen they added type, which gives additional information. As for IE, I don't really know a thing about it, and I think that should have been obvious from my original answer. – Breton Dec 02 '09 at 21:07
  • oh dear. Well I guess you'll just have to do it for firefox only. I don't know anything about IE so I can't help you with that. – Breton Dec 03 '09 at 05:40
5

Perhaps you could use SWFUpload instead, which is a small Flash application that handles the client side of the upload for you. From their feature list:

  • Upload multiple files at once by ctrl/shift-selecting in dialog
  • Javascript callbacks on all events
  • Get file information before upload starts
  • Style upload elements with XHTML and css
  • Display information while files are uploading using HTML
  • No page reloads necessary
  • Works on all platforms/browsers that has Flash support.
  • Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
  • Control filesize before upload starts
  • Only display chosen filetypes in dialog
  • Queue uploads, remove/add files before starting upload
Sune Rievers
  • 2,676
  • 3
  • 25
  • 29
2

I would like to combine the two different ways of checking file size on client side using javascript. I have tested it on FF/IE/Chrome and it works fine:

 <script type="text/javascript">
    function checkBrowser()
    {
         if(navigator.appName == "WebTV")
        {
         alert("You're using the WebTV browser.")
        }
         if(navigator.appName == "Netscape")
        {
         checkFileSizeFF();
        }
         if(navigator.appName == "Microsoft Internet Explorer")
        {
         checkFileSizeIE();
        }
    }
    function checkFileSizeFF()
    {
        var filesize = document.forms[0].file.files[0].fileSize;
        alert(filesize/(1024*1024)  + " MB");
    }
    function checkFileSizeIE()
    {
     var myFSO = new ActiveXObject("Scripting.FileSystemObject");
     var filepath = document.upload.file.value;
     var thefile = myFSO.getFile(filepath);
     var size = thefile.size/(1024*1024);
     alert(size + "MB");
    }
    </script>

    <form action="" method="get" accept-charset="utf-8" name="upload">
    <input type="file" name="file" value="" id="file">
    <p><input type="submit" value="Continue &rarr;" onclick="checkBrowser()"></p>
    </form>


    <div id="example"></div>
Umer Khalid Butt
  • 21
  • 1