How do I implement this max file size script with my HTML?

Question

I have been given this JavaScript script to restrict max file size before it is uploaded, but I'm not sure how I would implement it with my current code.

Here is the JavaScript:

<script type="text/javascript">

            function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
   console.log(f.size);        /*<--Here is your size of the file! :D*/
  }
}

 document.getElementById('files').addEventListener('change', handleFileSelect, false);

</script>

And my HTML:

<label>Upload Image</label>
<input type="file" name="image" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p>
<p><input type="submit" id="submit" value="Upload" />

MODIFIED CODE:

  <p><label>Upload Image</label>

  <script type="text/javascript">
 function handleFileSelect(evt) {
   var files = evt.target.files; // FileList object
    var max_size = 5120; // Max file size

  // files is a FileList of File objects. List some properties.
  var output = [];
   for (var i = 0, f; f = files[i]; i++) {
    // console.log(f.size);
     if(f.size > max_size) { // Check if file size is larger than max_size
     alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB.");
      return false;
    } // end if
   } // end for loop
 } //  end function

 document.getElementById('files').addEventListener('change', handleFileSelect, false);
 </script>

                <input type="file" name="image" id="files"/><br />
 <input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p>
                <p><input type="submit" id="submit" value="Upload" />
            </p>
       <p>&nbsp;</p>
 </form>

The method isn't really complete, it's using a console.log debug thing. Presumably you'd return false via the onsubmit event on the form if the comparison on f.size was greater than some threshold value you've predetermined. You should still check on backend if the size is too large due to end users disabling javascript or doing some other magic. — user17753
– user17753, Commented Oct 3, 2012 at 20:40

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

Just add an id attribute to the file input, since the script is looking for an element with an id of files:

<label>Upload Image</label>
<input type="file" name="image" id="files" /><br />
<input type="hidden" name="MAX_FILE_SIZE" value="5120" />
<p><input type="submit" id="submit" value="Upload" /></p>

http://jsfiddle.net/RnuT8/

By the way, be aware that this JavaScript can be easily bypassed by simply disabling JavaScript or directly uploading the file to the server without using your form. I recommend that you check the file size with your server side PHP upload script as well.

Modified Code

I have modified your script so you can enter a max size value and the script will check if it is greater than max_size or not:

window.onload = function() {

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var max_size = 5120; // Max file size
    
      // files is a FileList of File objects. List some properties.
      var output = [];
      for (var i = 0, f; f = files[i]; i++) {
       // console.log(f.size);
        if(f.size > max_size) { // Check if file size is larger than max_size
          alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB.");
          return false;
        } // end if
      } // end for loop
    } //  end function

   document.getElementById('files').addEventListener('change', handleFileSelect, false);
}

But remember, this is passable and the file size should be validated on the server as well (the JavaScript is good too and speeds up stuff, but if you want security you must validate it on the server as well).

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 3, 2012 at 20:38

Nathan

12k11 gold badges54 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

poudigne Over a year ago

Note that you will also need to validate file_size on server side.

neeko Over a year ago

@Nathan thankyou for your reply, i still can't get the validation to work before the file begins to upload, any ideas?

Nathan Over a year ago

@neeko I have edited my answer. Let me know if it works for you and if it does, please remember to click the check mark next to my answer to accept it :)

neeko Over a year ago

thankyou! i still can't seem to get it work my upload form looks like the one you posted and i copied the javascript, any ideas?

neeko Over a year ago

no sorry ignore that it is working thankyou so much!! any way to make it so that it doesnt select the file if it is too big

|

Simon Germain · Accepted Answer · 2012-10-03 20:38:21Z

1

The script is looking for an element with an id of "files". Try adding the id on your input, like this:

<input type="file" id="files" name="image" />

answered Oct 3, 2012 at 20:38

Simon Germain

6,8641 gold badge29 silver badges42 bronze badges

Collectives™ on Stack Overflow

How do I implement this max file size script with my HTML?

2 Answers 2

Modified Code

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Modified Code

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related