Reading file contents on the client-side in javascript in various browsers

Question

I m attempting to provide a script-only solution for reading the contents of a file on a client machine through a browser   I have a solution that works with Firefox and Internet Explorer   It s not pretty  but I m only trying things at the moment   function getFileContents         var fileForUpload   document forms 0  fileForUpload      var fileName   fileForUpload value       if  fileForUpload files            var fileContents   fileForUpload files item 0  getAsBinary            document forms 0  fileContents innerHTML   fileContents        else              try the IE method         var fileContents   ieReadFile fileName           document forms 0  fileContents innerHTML   fileContents                  function ieReadFile filename         try               var fso    new ActiveXObject  Scripting FileSystemObject             var fh   fso OpenTextFile filename  1            var contents   fh ReadAll             fh Close            return contents            catch  Exception                return  Cannot open file                I can call getFileContents   and it will write the contents into the fileContents text area   Is there a way to do this in other browsers   I m most concerned with Safari and Chrome at the moment  but I m open to suggestions for any other browser   Edit  In response to the question   Why do you want to do this     Basically  I want to hash the file contents together with a one-time-password on the client side so I can send this information back as a verification

User · Answer

In order to read a file chosen by the user, using a file open dialog, you can use the <input type="file"> tag. You can find information on it from MSDN. When the file is chosen you can use the FileReader API to read the contents.

_x000D_

function onFileLoad(elementId, event) {_x000D_
    document.getElementById(elementId).innerText = event.target.result;_x000D_
}_x000D_
_x000D_
function onChooseFile(event, onLoadFileHandler) {_x000D_
    if (typeof window.FileReader !== 'function')_x000D_
        throw ("The file API isn't supported on this browser.");_x000D_
    let input = event.target;_x000D_
    if (!input)_x000D_
        throw ("The browser does not properly implement the event object");_x000D_
    if (!input.files)_x000D_
        throw ("This browser does not support the `files` property of the file input.");_x000D_
    if (!input.files[0])_x000D_
        return undefined;_x000D_
    let file = input.files[0];_x000D_
    let fr = new FileReader();_x000D_
    fr.onload = onLoadFileHandler;_x000D_
    fr.readAsText(file);_x000D_
}

_x000D_

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' />_x000D_
<p id="contents"></p>

_x000D_

User · Answer

Edited to add information about the File API  Since I originally wrote this answer  the File API has been proposed as a standard and implemented in most browsers  as of IE 10  which added support for FileReader API described here  though not yet the File API   The API is a bit more complicated than the older Mozilla API  as it is designed to support asynchronous reading of files  better support for binary files and decoding of different text encodings  There is some documentation available on the Mozilla Developer Network as well as various examples online  You would use it as follows   var file   document getElementById  fileForUpload   files 0   if  file        var reader   new FileReader        reader readAsText file   UTF-8        reader onload   function  evt            document getElementById  fileContents   innerHTML   evt target result            reader onerror   function  evt            document getElementById  fileContents   innerHTML    error reading file             Original answer  There does not appear to be a way to do this in WebKit  thus  Safari and Chrome   The only keys that a File object has are fileName and fileSize  According to the commit message for the File and FileList support  these are inspired by Mozilla s File object  but they appear to support only a subset of the features   If you would like to change this  you could always send a patch to the WebKit project  Another possibility would be to propose the Mozilla API for inclusion in HTML 5  the WHATWG mailing list is probably the best place to do that  If you do that  then it is much more likely that there will be a cross-browser way to do this  at least in a couple years time  Of course  submitting either a patch or a proposal for inclusion to HTML 5 does mean some work defending the idea  but the fact that Firefox already implements it gives you something to start with

User · Answer

Happy coding  If you get an error on Internet Explorer  Change the security settings to allow ActiveX var CallBackFunction   function content      alert content     ReadFileAllBrowsers document getElementById  quot file upload quot    CallBackFunction     Tested in Mozilla Firefox browser  Chrome function ReadFileAllBrowsers FileElement  CallBackFunction      try       var file   FileElement files 0       var contents     quot  quot        if  file          var reader   new FileReader          reader readAsText file   quot UTF-8 quot          reader onload   function evt            CallBackFunction evt target result                 reader onerror   function evt            alert  quot Error reading file quot                      catch  Exception        var fall back   ieReadFile FileElement value       if  fall back    false          CallBackFunction fall back                  Reading files with Internet Explorer function ieReadFile filename      try       var fso   new ActiveXObject  quot Scripting FileSystemObject quot        var fh   fso OpenTextFile filename  1       var contents   fh ReadAll        fh Close        return contents      catch  Exception        alert Exception       return false

User · Answer

There s a modern native alternative  File implements Blob  so we can call Blob text     x000D   x000D  async function readText event      const file   event target files item 0    const text   await file text         document getElementById  output   innerText   text   x000D   lt input type  file  onchange  readText event     gt   lt pre id  output  gt  lt  pre gt  x000D   x000D   x000D   Currently  September 2020  this is supported in Chrome and Firefox  for other Browser you need to load a polyfill  e g  blob-polyfill

[javascript] Reading file contents on the client-side in javascript in various browsers

Examples related to javascript

Examples related to html

Examples related to file-io

Examples related to sandbox