Reading client side file contents in javascript in various browsers

Question

I am trying to provide a script - one 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. This is ugly, but I'm just trying:

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 to the text area of fileContents .

Is there any way to do this in other browsers?

At the moment, I'm most interested in Safari and Chrome, 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 contents of the file along with a one-time password on the client side so that I can send this information as confirmation.

Answer 1

Edited to add information about API files

Since I originally wrote this answer, the File API was proposed as a standard and implemented in most browsers (starting with IE 10, where the FileReader API support has been added, described here, although not yet the File API). The API is a bit more complicated than the old Mozilla API, as it is designed to support asynchronous file reading, better binary support and decoding of various text encodings. There is some documentation available on the Mozilla Developer Network , as well as various examples on the Internet . 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 is no way in WebKit to do this (thus, Safari and Chrome). The only keys that File have are fileName and fileSize . According to the commit post for supporting File and FileList, they are inspired by the Mozilla File object , but they seem to support only part of the functions.

If you want to change this, you can always send the patch to the WebKit project. Another option is to offer the Mozilla API for inclusion in HTML 5 ; The WHATWG mailing list is probably the best place to do this. If you do, it is much more likely that this will be a cross-browser way to do this, at least in a couple of years. Sure, sending a patch or suggestion for inclusion in HTML 5 means some work protecting the idea, but the fact that Firefox already implements it gives you something to start with.

Answer 2

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

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

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

Answer 3

Happy coding!
If you receive an error message in Internet Explorer, change the security settings to enable ActiveX

 var CallBackFunction = function(content) { alert(content); } ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); //Tested in Mozilla Firefox browser, Chrome function ReadFileAllBrowsers(FileElement, CallBackFunction) { try { var file = FileElement.files[0]; var contents_ = ""; if (file) { var reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onload = function(evt) { CallBackFunction(evt.target.result); } reader.onerror = function (evt) { alert("Error reading file"); } } } 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("Scripting.FileSystemObject"); var fh = fso.OpenTextFile(filename, 1); var contents = fh.ReadAll(); fh.Close(); return contents; } catch (Exception) { alert(Exception); return false; } }