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.
If the user selects a file via <input type="file">, 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.
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.
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.
If you have input field like
<input type="file" id="file" name="file" onchange="add(event)"/>
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;
}
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.
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 "interrupts" 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.
You have to work with the new file system API in Javascript
window.showSaveFilePicker - which allows us to save a file to a users computer, which we then have read/write access to.
window.showOpenFilePicker - which allows us to open an existing file on a users computer, which we can then read/write to.
window.showDirectoryPicker - which gives us access to a directory, which we can then read/write to.
check tutorial at https://fjolt.com/article/javascript-new-file-system-api