How to open a local disk file with JavaScript

Question

I tried to open file with  window open  file    D  Hello txt      The browser does not allow opening a local file this way  probably for security reasons  I want to use the file s data in the client side  How can I read local file in JavaScript

User · Answer

Try  function readFile file      return new Promise  resolve  reject    gt        let fr   new FileReader        fr onload   x  gt  resolve fr result       fr readAsText file         but user need to take action to choose file   x000D   x000D  function readFile file    x000D    return new Promise  resolve  reject    gt    x000D      let fr   new FileReader    x000D      fr onload   x  gt  resolve fr result   x000D      fr readAsText file   x000D      x000D   x000D  async function read input    x000D    msg innerText   await readFile input files 0    x000D    x000D   lt input type  file  onchange  read this    gt  x000D   lt h3 gt Content  lt  h3 gt  lt pre id  msg  gt  lt  pre gt  x000D   x000D   x000D

User · Answer

Consider reformatting your file into javascript  Then you can simply load it using good old     lt script src  quot thefileIwantToLoad js quot  defer gt  lt  script gt

User · Answer

The HTML5 fileReader facility does allow you to process local files  but these MUST be selected by the user  you cannot go rooting about the users disk looking for files   I currently use this with development versions of Chrome  6 x   I don t know what other browsers support it

User · Answer

You can t  New browsers like Firefox  Safari etc  block the  file  protocol  It will only work on old browsers   You ll have to upload the files you want

User · Answer

The xmlhttp request method is not valid for the files on local disk because the browser security does not allow us to do so But we can override the browser security by creating a shortcut- right click- properties In target      browser location path exe  append --allow-file-access-from-files This is tested on chrome however care should be taken that all browser windows should be closed and the code should be run from the browser opened via this shortcut

User · Answer

Others here have given quite elaborate code for this  Perhaps more elaborate code was needed at that time  I don t know  Anyway  I upvoted one of them  but here is a very much simplified version that works the same   x000D   x000D  function openFile       document getElementById  inp   click      function readFile e      var file   e target files 0     if   file  return    var reader   new FileReader      reader onload   function e        document getElementById  contents   innerHTML   e target result        reader readAsText file    x000D  Click the button then choose a file to see its contents displayed below   lt button onclick  openFile    gt Open a file lt  button gt   lt input id  inp  type  file  style  visibility hidden   onchange  readFile event     gt   lt pre id  contents  gt  lt  pre gt  x000D   x000D   x000D

User · Answer

Javascript cannot typically access local files in new browsers but the XMLHttpRequest object can be used to read files  So it is actually Ajax  and not Javascript  which is reading the file   If you want to read the file abc txt  you can write the code as   var txt       var xmlhttp   new XMLHttpRequest    xmlhttp onreadystatechange   function      if xmlhttp status    200  amp  amp  xmlhttp readyState    4       txt   xmlhttp responseText         xmlhttp open  GET   abc txt  true   xmlhttp send      Now txt contains the contents of the file abc txt

User · Answer

Because I have no life and I want those 4 reputation points so I can show my love to  upvote answers by  people who are actually good at coding I ve shared my adaptation of Paolo Moretti s code  Just use openFile function to be executed with file contents as first parameter     x000D   x000D  function dispFile contents    x000D    document getElementById  contents   innerHTML contents x000D    x000D  function clickElem elem    x000D      Thx user1601638 on Stack Overflow  6 6 2018 - https   stackoverflow com questions 13405129 javascript-create-and-save-file   x000D   var eventMouse   document createEvent  MouseEvents   x000D   eventMouse initMouseEvent  click   true  false  window  0  0  0  0  0  false  false  false  false  0  null  x000D   elem dispatchEvent eventMouse  x000D    x000D  function openFile func    x000D   readFile   function e    x000D    var file   e target files 0   x000D    if   file    x000D     return  x000D      x000D    var reader   new FileReader    x000D    reader onload   function e    x000D     var contents   e target result  x000D     fileInput func contents  x000D     document body removeChild fileInput  x000D      x000D    reader readAsText file  x000D     x000D   fileInput   document createElement  input   x000D   fileInput type  file  x000D   fileInput style display  none  x000D   fileInput onchange readFile x000D   fileInput func func x000D   document body appendChild fileInput  x000D   clickElem fileInput  x000D    x000D  Click the button then choose a file to see its contents displayed below  x000D   lt button onclick  openFile dispFile   gt Open a file lt  button gt  x000D   lt pre id  contents  gt  lt  pre gt  x000D   x000D   x000D

User · Answer

Here s an example using FileReader   x000D   x000D  function readSingleFile e      var file   e target files 0     if   file        return        var reader   new FileReader      reader onload   function e        var contents   e target result      displayContents contents          reader readAsText file      function displayContents contents      var element   document getElementById  file-content      element textContent   contents     document getElementById  file-input      addEventListener  change   readSingleFile  false   x000D   lt input type  file  id  file-input    gt   lt h3 gt Contents of the file  lt  h3 gt   lt pre id  file-content  gt  lt  pre gt  x000D   x000D   x000D    Specs http   dev w3 org 2006 webapi FileAPI  Browser compatibility  IE 10  Firefox 3 6  Chrome 13  Safari 6 1   http   caniuse com  feat fileapi

[javascript] How to open a local disk file with JavaScript?

Examples related to javascript