CODEWITHSUNDEEP
javascriptupload
neeko
neeko

Reputation: 2000

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

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>

Upvotes: 0

Views: 1934

Answers (2)

Nathan
Nathan

Reputation: 12010

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).

Upvotes: 4

Simon Germain
Simon Germain

Reputation: 6844

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" />

Upvotes: 1

Related Questions