Local file access with JavaScript

Question

Is there local file manipulation that s been done with JavaScript  I m looking for a solution that can be accomplished with no install footprint like requiring Adobe AIR   Specifically  I d like to read the contents from a file and write those contents to another file  At this point I m not worried about gaining permissions and am just assuming I already have full permissions to these files

User · Answer

NW js allows you to create desktop applications using Javascript without all the security restrictions usually placed on the browser  So you can run executables with a function  or create edit read write delete files  You can access the hardware  such as current CPU usage or total ram in use  etc  You can create a windows  linux  or mac desktop application with it that doesn t require any installation   http   nwjs io

User · Answer

Just an update of the HTML5 features is in http   www html5rocks com en tutorials file dndfiles   This excellent article will explain in detail the local file access in JavaScript  Summary from the mentioned article   The specification provides several interfaces for accessing files from a  local  filesystem    File - an individual file  provides readonly information such as name  file size  MIME type  and a reference to the file handle  FileList - an array-like sequence of File objects   Think  lt input type  file  multiple gt  or dragging a directory of files from the desktop   Blob - Allows for slicing a file into byte ranges    See Paul D  Waite s comment below

User · Answer

If you re deploying on Windows  the Windows Script Host offers a very useful JScript API to the file system and other local resources   Incorporating WSH scripts into a local web application may not be as elegant as you might wish  however

User · Answer

If the user selects a file via  lt input type  file  gt   you can read and process that file using the File API   Reading or writing arbitrary files is not allowed by design  It s a violation of the sandbox  From Wikipedia -  Javascript -  Security      JavaScript and the DOM provide the   potential for malicious authors to   deliver scripts to run on a client   computer via the web  Browser authors   contain this risk using two   restrictions  First  scripts run in a   sandbox in which they can only perform   web-related actions  not   general-purpose programming tasks like   creating files    2016 UPDATE  Accessing the filesystem directly is possible via the Filesystem API  which is only supported by Chrome and Opera and may end up not being implemented by other browsers  with the exception of Edge   For details see Kevin s answer

User · Answer

If you re deploying on Windows  the Windows Script Host offers a very useful JScript API to the file system and other local resources   Incorporating WSH scripts into a local web application may not be as elegant as you might wish  however

User · Answer

There is a  commercial  product   localFS  which can be used to read and write entire file-system on client computer    Small Windows app must be installed and tiny  js file included in your page   As a security feature  file-system access can be limited to one folder and protected with a secret-key   https   www fathsoft com localfs

User · Answer

UPDATE This feature is removed since Firefox 17  see https   bugzilla mozilla org show bug cgi id 546848      On Firefox you  the programmer  can do this from within a JavaScript file   netscape security PrivilegeManager enablePrivilege  UniversalBrowserRead    netscape security PrivilegeManager enablePrivilege  UniversalBrowserWrite      and you  the browser user  will be prompted to allow access   for Firefox you just need to do this once every time the browser is started   If the browser user is someone else  they have to grant permission

User · Answer

NW js allows you to create desktop applications using Javascript without all the security restrictions usually placed on the browser  So you can run executables with a function  or create edit read write delete files  You can access the hardware  such as current CPU usage or total ram in use  etc  You can create a windows  linux  or mac desktop application with it that doesn t require any installation   http   nwjs io

User · Answer

I am only mentioning this as no one mentioned this  There s no programming language I am aware of which allows manipulation of the underlying filesystem  All programming languages rely on OS interrupts to actually get these things done  JavaScript that runs in the browser only has browser  quot interrupts quot  to work with which generally does not grant filesystem access unless the browser has been implemented to support such interrupts  This being said the obvious way to have file system access using JavaScript is to use Node js which does have the capability of interacting with the underlying OS directly

User · Answer

if you are using angularjs  amp  aspnet mvc  to retrieve json files  you   have to allow mime type at web config    lt staticContent gt       lt remove fileExtension   json    gt       lt mimeMap fileExtension   json  mimeType  application json    gt     lt  staticContent gt

User · Answer

If the user selects a file via  lt input type  file  gt   you can read and process that file using the File API   Reading or writing arbitrary files is not allowed by design  It s a violation of the sandbox  From Wikipedia -  Javascript -  Security      JavaScript and the DOM provide the   potential for malicious authors to   deliver scripts to run on a client   computer via the web  Browser authors   contain this risk using two   restrictions  First  scripts run in a   sandbox in which they can only perform   web-related actions  not   general-purpose programming tasks like   creating files    2016 UPDATE  Accessing the filesystem directly is possible via the Filesystem API  which is only supported by Chrome and Opera and may end up not being implemented by other browsers  with the exception of Edge   For details see Kevin s answer

User · Answer

if you are using angularjs  amp  aspnet mvc  to retrieve json files  you   have to allow mime type at web config    lt staticContent gt       lt remove fileExtension   json    gt       lt mimeMap fileExtension   json  mimeType  application json    gt     lt  staticContent gt

User · Answer

I am only mentioning this as no one mentioned this  There s no programming language I am aware of which allows manipulation of the underlying filesystem  All programming languages rely on OS interrupts to actually get these things done  JavaScript that runs in the browser only has browser  quot interrupts quot  to work with which generally does not grant filesystem access unless the browser has been implemented to support such interrupts  This being said the obvious way to have file system access using JavaScript is to use Node js which does have the capability of interacting with the underlying OS directly

User · Answer

If you re deploying on Windows  the Windows Script Host offers a very useful JScript API to the file system and other local resources   Incorporating WSH scripts into a local web application may not be as elegant as you might wish  however

User · Answer

Just an update of the HTML5 features is in http   www html5rocks com en tutorials file dndfiles   This excellent article will explain in detail the local file access in JavaScript  Summary from the mentioned article   The specification provides several interfaces for accessing files from a  local  filesystem    File - an individual file  provides readonly information such as name  file size  MIME type  and a reference to the file handle  FileList - an array-like sequence of File objects   Think  lt input type  file  multiple gt  or dragging a directory of files from the desktop   Blob - Allows for slicing a file into byte ranges    See Paul D  Waite s comment below

User · Answer

FSO js wraps the new HTML5 FileSystem API that s being standardized by the W3C and provides an extremely easy way to read from  write to  or traverse a local sandboxed file system  It s asynchronous  so file I O will not interfere with user experience

User · Answer

Assuming that any file that JavaScript code might need  should be allowed directly by the user  Creators of famous browsers do not let JavaScript access files generally   The main idea of the solution is  the JavaScript code cannot access the file by having its local URL  But it can use the file by having its DataURL  so if the user browses a file and opens it  JavaScript should get the  DataURL  directly from HTML instead of getting  URL    Then it turns the DataURL into a file  using the readAsDataURL function and FileReader object   Source and a more complete guide with a nice example are in   https   developer mozilla org en-US docs Web API FileReader redirectlocale en-US amp redirectslug DOM 2FFileReader

User · Answer

As previously mentioned  the FileSystem and File APIs  along with the FileWriter API  can be used to read and write files from the context of a browser tab window to a client machine   There are several things pertaining to the FileSystem and FileWriter APIs which you should be aware of  some of which were mentioned  but are worth repeating    Implementations of the APIs currently exist only in Chromium-based browsers  Chrome  amp  Opera  Both of the APIs were taken off of the W3C standards track on April 24  2014  and as of now are proprietary  Removal of the  now proprietary  APIs from implementing browsers in the future is a possibility A sandbox  a location on disk outside of which files can produce no effect  is used to store the files created with the APIs A virtual file system  a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser  is used represent the files created with the APIs   Here are simple examples of how the APIs are used  directly and indirectly  in tandem to do these things   BakedGoods   Write file   bakedGoods set       data    key   testFile   value   Hello world    dataFormat   text plain         storageTypes    fileSystem        options   fileSystem  storageType  Window PERSISTENT        complete  function byStorageTypeStoredItemRangeDataObj  byStorageTypeErrorObj          Read file   bakedGoods get           data    testFile            storageTypes    fileSystem            options   fileSystem  storageType  Window PERSISTENT            complete  function resultDataObj  byStorageTypeErrorObj          Using the raw File  FileWriter  and FileSystem APIs  Write file   function onQuotaRequestSuccess grantedQuota         function saveFile directoryEntry                 function createFileWriter fileEntry                         function write fileWriter                                var dataBlob   new Blob   Hello world      type   text plain                     fileWriter write dataBlob                                            fileEntry createWriter write                      directoryEntry getFile               testFile                 create  true  exclusive  true               createFileWriter                       requestFileSystem Window PERSISTENT  grantedQuota  saveFile      var desiredQuota   1024   1024   1024  var quotaManagementObj   navigator webkitPersistentStorage  quotaManagementObj requestQuota desiredQuota  onQuotaRequestSuccess     Read file   function onQuotaRequestSuccess grantedQuota         function getfile directoryEntry                 function readFile fileEntry                         function read file                                var fileReader   new FileReader                     fileReader onload   function   var fileData   fileReader result                   fileReader readAsText file                                           fileEntry file read                      directoryEntry getFile               testFile                 create  false               readFile                       requestFileSystem Window PERSISTENT  grantedQuota  getFile      var desiredQuota   1024   1024   1024  var quotaManagementObj   navigator webkitPersistentStorage  quotaManagementObj requestQuota desiredQuota  onQuotaRequestSuccess     Though the FileSystem and FileWriter APIs are no longer on the standards track  their use can be justified in some cases  in my opinion  because    Renewed interest from the un-implementing browser vendors may place them right back on it Market penetration of implementing  Chromium-based  browsers is high Google  the main contributer to Chromium  has not given and end-of-life date to the APIs    Whether  some cases  encompasses your own  however  is for you to decide    BakedGoods is maintained by none other than this guy right here

User · Answer

UPDATE This feature is removed since Firefox 17  see https   bugzilla mozilla org show bug cgi id 546848      On Firefox you  the programmer  can do this from within a JavaScript file   netscape security PrivilegeManager enablePrivilege  UniversalBrowserRead    netscape security PrivilegeManager enablePrivilege  UniversalBrowserWrite      and you  the browser user  will be prompted to allow access   for Firefox you just need to do this once every time the browser is started   If the browser user is someone else  they have to grant permission

User · Answer

If the user selects a file via  lt input type  file  gt   you can read and process that file using the File API   Reading or writing arbitrary files is not allowed by design  It s a violation of the sandbox  From Wikipedia -  Javascript -  Security      JavaScript and the DOM provide the   potential for malicious authors to   deliver scripts to run on a client   computer via the web  Browser authors   contain this risk using two   restrictions  First  scripts run in a   sandbox in which they can only perform   web-related actions  not   general-purpose programming tasks like   creating files    2016 UPDATE  Accessing the filesystem directly is possible via the Filesystem API  which is only supported by Chrome and Opera and may end up not being implemented by other browsers  with the exception of Edge   For details see Kevin s answer

User · Answer

If you have input field like    lt input type  file  id  file  name  file  onchange  add event    gt    You can get to file content in BLOB format   function add event     var userFile   document getElementById  file      userFile src   URL createObjectURL event target files 0      var data   userFile src

User · Answer

As previously mentioned  the FileSystem and File APIs  along with the FileWriter API  can be used to read and write files from the context of a browser tab window to a client machine   There are several things pertaining to the FileSystem and FileWriter APIs which you should be aware of  some of which were mentioned  but are worth repeating    Implementations of the APIs currently exist only in Chromium-based browsers  Chrome  amp  Opera  Both of the APIs were taken off of the W3C standards track on April 24  2014  and as of now are proprietary  Removal of the  now proprietary  APIs from implementing browsers in the future is a possibility A sandbox  a location on disk outside of which files can produce no effect  is used to store the files created with the APIs A virtual file system  a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser  is used represent the files created with the APIs   Here are simple examples of how the APIs are used  directly and indirectly  in tandem to do these things   BakedGoods   Write file   bakedGoods set       data    key   testFile   value   Hello world    dataFormat   text plain         storageTypes    fileSystem        options   fileSystem  storageType  Window PERSISTENT        complete  function byStorageTypeStoredItemRangeDataObj  byStorageTypeErrorObj          Read file   bakedGoods get           data    testFile            storageTypes    fileSystem            options   fileSystem  storageType  Window PERSISTENT            complete  function resultDataObj  byStorageTypeErrorObj          Using the raw File  FileWriter  and FileSystem APIs  Write file   function onQuotaRequestSuccess grantedQuota         function saveFile directoryEntry                 function createFileWriter fileEntry                         function write fileWriter                                var dataBlob   new Blob   Hello world      type   text plain                     fileWriter write dataBlob                                            fileEntry createWriter write                      directoryEntry getFile               testFile                 create  true  exclusive  true               createFileWriter                       requestFileSystem Window PERSISTENT  grantedQuota  saveFile      var desiredQuota   1024   1024   1024  var quotaManagementObj   navigator webkitPersistentStorage  quotaManagementObj requestQuota desiredQuota  onQuotaRequestSuccess     Read file   function onQuotaRequestSuccess grantedQuota         function getfile directoryEntry                 function readFile fileEntry                         function read file                                var fileReader   new FileReader                     fileReader onload   function   var fileData   fileReader result                   fileReader readAsText file                                           fileEntry file read                      directoryEntry getFile               testFile                 create  false               readFile                       requestFileSystem Window PERSISTENT  grantedQuota  getFile      var desiredQuota   1024   1024   1024  var quotaManagementObj   navigator webkitPersistentStorage  quotaManagementObj requestQuota desiredQuota  onQuotaRequestSuccess     Though the FileSystem and FileWriter APIs are no longer on the standards track  their use can be justified in some cases  in my opinion  because    Renewed interest from the un-implementing browser vendors may place them right back on it Market penetration of implementing  Chromium-based  browsers is high Google  the main contributer to Chromium  has not given and end-of-life date to the APIs    Whether  some cases  encompasses your own  however  is for you to decide    BakedGoods is maintained by none other than this guy right here

User · Answer

UPDATE This feature is removed since Firefox 17  see https   bugzilla mozilla org show bug cgi id 546848      On Firefox you  the programmer  can do this from within a JavaScript file   netscape security PrivilegeManager enablePrivilege  UniversalBrowserRead    netscape security PrivilegeManager enablePrivilege  UniversalBrowserWrite      and you  the browser user  will be prompted to allow access   for Firefox you just need to do this once every time the browser is started   If the browser user is someone else  they have to grant permission

User · Answer

Assuming that any file that JavaScript code might need  should be allowed directly by the user  Creators of famous browsers do not let JavaScript access files generally   The main idea of the solution is  the JavaScript code cannot access the file by having its local URL  But it can use the file by having its DataURL  so if the user browses a file and opens it  JavaScript should get the  DataURL  directly from HTML instead of getting  URL    Then it turns the DataURL into a file  using the readAsDataURL function and FileReader object   Source and a more complete guide with a nice example are in   https   developer mozilla org en-US docs Web API FileReader redirectlocale en-US amp redirectslug DOM 2FFileReader

User · Answer

FSO js wraps the new HTML5 FileSystem API that s being standardized by the W3C and provides an extremely easy way to read from  write to  or traverse a local sandboxed file system  It s asynchronous  so file I O will not interfere with user experience

User · Answer

If you re deploying on Windows  the Windows Script Host offers a very useful JScript API to the file system and other local resources   Incorporating WSH scripts into a local web application may not be as elegant as you might wish  however

User · Answer

If you need access to the entire file system on the client  read write files  watch folders for changes  start applications  encrypt or sign documents  etc  please have a look at JSFS   It allows secure and unlimited access from your web page to computer resources on the client without using a browser plugin technology like AcitveX or Java Applet  However  a peace of software has to be installed too   In order to work with JSFS you should have basic knowledge in Java and Java EE development  Servlets    Please find JSFS here  https   github com jsfsproject jsfs  It s free and licensed under GPL

User · Answer

If the user selects a file via  lt input type  file  gt   you can read and process that file using the File API   Reading or writing arbitrary files is not allowed by design  It s a violation of the sandbox  From Wikipedia -  Javascript -  Security      JavaScript and the DOM provide the   potential for malicious authors to   deliver scripts to run on a client   computer via the web  Browser authors   contain this risk using two   restrictions  First  scripts run in a   sandbox in which they can only perform   web-related actions  not   general-purpose programming tasks like   creating files    2016 UPDATE  Accessing the filesystem directly is possible via the Filesystem API  which is only supported by Chrome and Opera and may end up not being implemented by other browsers  with the exception of Edge   For details see Kevin s answer

User · Answer

If you need access to the entire file system on the client  read write files  watch folders for changes  start applications  encrypt or sign documents  etc  please have a look at JSFS   It allows secure and unlimited access from your web page to computer resources on the client without using a browser plugin technology like AcitveX or Java Applet  However  a peace of software has to be installed too   In order to work with JSFS you should have basic knowledge in Java and Java EE development  Servlets    Please find JSFS here  https   github com jsfsproject jsfs  It s free and licensed under GPL

User · Answer

If you have input field like    lt input type  file  id  file  name  file  onchange  add event    gt    You can get to file content in BLOB format   function add event     var userFile   document getElementById  file      userFile src   URL createObjectURL event target files 0      var data   userFile src

User · Answer

UPDATE This feature is removed since Firefox 17  see https   bugzilla mozilla org show bug cgi id 546848      On Firefox you  the programmer  can do this from within a JavaScript file   netscape security PrivilegeManager enablePrivilege  UniversalBrowserRead    netscape security PrivilegeManager enablePrivilege  UniversalBrowserWrite      and you  the browser user  will be prompted to allow access   for Firefox you just need to do this once every time the browser is started   If the browser user is someone else  they have to grant permission

User · Answer

There is a  commercial  product   localFS  which can be used to read and write entire file-system on client computer    Small Windows app must be installed and tiny  js file included in your page   As a security feature  file-system access can be limited to one folder and protected with a secret-key   https   www fathsoft com localfs

[javascript] Local file access with JavaScript

Examples related to javascript

Examples related to file-access