File Input Demo

Demo <input type=file />

by brnvndr

HTML

<h1>
File Input Test
</h1>

<p>
Choose a file on your computer e.g. c:\temp\myfile.txt"
</p>

<p>
<label>File Choose: </label>
<input id="fileInput" type=file name=attachment maxlength=200 size=40 onchange="getFileInfo()">
</p>

<p>
   <ul>
     <li>IE: c:\temp\myfile.txt</li>
     <li>Chrome: myfile.txt (actually would return c:\fakepath\myfile.txt)</li>
     <li>Firefox: myfile.txt</li>
   </ul>
</p>

<p>
If you want the full path...
</p>

<p>
 <ul>
  <li><a href="http://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav">http://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav</a></li>
   <li>Set internet zone property: "Include Local directory path when uploading files to a server" - have not gotten this to work on Chrome or Firefox </li>
      <li><a href="http://martinivanov.net/2009/06/09/the-mystery-of-cfakepath-unveiled/">http://martinivanov.net/2009/06/09/the-mystery-of-cfakepath-unveiled/</a> notes that in the HTML5 specification: "a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:fakepath."</li>
   <li>It appears that IE11 still supports getting the local file path - as long as the site is trusted / and "Include Local directory path... " is enabled.  "Interestingly", if this setting is disabled, and you upload a file, the input display will show c:\temp\myfile.txt, but the actual value will be c:\fakepath\myfile.txt!!!!</li>
 </ul>

</p>

<hr />
<p>
Using Files: <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications</a>
</p>

<table>
    <tr>
      <th>File Property</th>
      <th>Value</th>
    </tr>
    <tr>
      <td>File Input Value</td>
...

JavaScript

function getFileInfo() {

    let files = document.getElementById("fileInput").files;
    
    let file = files[0];
    
    console.log(file.size);
    console.log(file.lastModified);
    console.log(file.lastModifiedDate);
    console.log(file.name);
    console.log(file.webkitRelativePath);
    
    document.getElementById("fileInputValue").innerHTML = document.getElementById("fileInput").value;
    document.getElementById("fileSizeValue").innerHTML = file.size;
    document.getElementById("lastModifiedValue").innerHTML = file.lastModified;
    document.getElementById("lastModifiedDateValue").innerHTML = file.lastModifiedDate;
    document.getElementById("nameValue").innerHTML = file.name;
    document.getElementById("webkitRelativePathValue").innerHTML = file.webkitRelativePath;
    
     

}