Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Input FileUpload files Property
  • Difficulty Level : Basic
  • Last Updated : 23 May, 2021

The Input FileUpload files Property in HTML DOM is used to return a FileList object, representing one or multiple files selected with the file upload button and This is a read-only property. 
Through the FileList object, you can get the information about the files.
Syntax: 
 

fileuploadObject.files

Return Values : It returns a FileList object which represent the selected file or files. 

Examples: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
      Input FileUpload files Property
  </title>
</head>
 
<body onload="myFunction()">
    <center>
        <h1 style="color: green">
          GeeksforGeeks
      </h1>
         
<p>
            <b>
            DOM Input FileUpload files Property
          </b>
        </p>
 
        <input type="file"
               id="myFile"
               multiple size="50"
               onchange="myFunction()">
 
        <p id="demo"></p>
 
 
        <script>
            function myFunction() {
                var GFG =
                    document.getElementById("myFile");
                var msg = "";
                if ('files' in GFG) {
                    if (GFG.files.length == 0) {
                        msg =
                            "Select multiple files using" +
                            " 'Shift'.";
                    } else {
                        for (var i = 0; i < GFG.files.length; i++) {
 
                            msg += "<br><strong>" + (i + 1) +
                                ". file</strong><br>";
 
                            var file = GFG.files[i];
                            if ('name' in file) {
                                msg += "name: " + file.name + "<br>";
                            }
                            if ('size' in file) {
                                msg += "size: " + file.size +
                                    " bytes <br>";
 
                            }
                        }
                    }
                } else {
                    if (GFG.value == "") {
                        msg += "Select multiple" +
                          " files using 'Shift'.";
                       
                    } else {
                        msg += "This file property" +
                          " is not supported!!";
                       
                        /* If the browser does not
                        support the files property,
                        it will return the path of
                        the selected file instead. */
                        msg += "<br>The path of the " +
                          "selected file: " + GFG.value;
                    }
                }
                document.getElementById("demo").innerHTML = msg;
            }
        </script>
    </center>
</body>
 
</html>

Output: 
Before: 
 



After: 
 

Supported Browsers: 
 

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :