CODEWITHSUNDEEP
javascriptfileapi
Filipp Voronov
Filipp Voronov

Reputation: 4197

Save files into selected directory (javascript)


Hello! My question is about javascript.
I want to
1. ask a user to select a directory
2. then write my bunch of files to it (probably with creating sub-directories) without interaction with user

How can I do this? And can I?
I am new in javascript and I hope for your help.

PS.
I've heard about ability to ask a user to select a path by save file dialog and then save data to selected file, but i want to ask a user once for selecting a directory and then create a bunch of files in it without bothering a user for each one.

Upvotes: 6

Views: 19891

Answers (2)

Dartagnan222
Dartagnan222

Reputation: 9

The first function saveAs() get the FileSystemDirectoryHandle, creates a new subdirectory named "NewDirectoryName" and a file in it named "NewFileName.doc", then saves the content of the div in this file.

The second function saveAs2() get all the FileSystemFileHandle and FileSystemDirectoryHandle of subdirectories and files in the choosen directory. Here, I write again on the same file named "NewFileName.doc", and log all others Handle of the directory in the console.

<html>
<body>
<input type="button" onmousedown="saveAs()" value="Create file in directory"/>
<input type="button" onmousedown="saveAs2()" value="Overwrite any file in directory"/>
<div contenteditable id="div001"><b>Text to save in your new file</b><div>

<script>
async function saveAs(){
div001 = document.querySelector('#div001');
const opts = {mode:'readwrite'};
directoryHandle = await window.showDirectoryPicker(opts);
const subDirectory = await directoryHandle.getDirectoryHandle('NewDirectoryName', {create:true});
const file = subDirectory.getFileHandle('NewFileName.doc', {create:true});
const writable = await file.createWritable();
await writable.write(div001.innerHTML);
await writable.close();
};

async function saveAs2(){
for await([name,handle] of directoryHandle){if(name=="NewDirectoryName"){const file = await handle.getFileHandle("NewFileName.doc", {create:true});
const writable = await handle.createWritable();    
await writable.write(dv001.innerHTML);
await writable.close();
console.log(handle);
}else{console.log(handle);}}
};
</script>
</body>
</html>

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

Javascript alone doesn't have any way to access the local computer's file system for WRITE purposes. Period.

However, Downloadify, by Doug Neiner, was built for this purpose and uses a combination of Javascript and the Flash library.

It needs Flash 10 to work.

Alternately, you can install apache onto the computer (or better yet, a full stack like XAMPP or WAMP/MAMP/LAMP) and use PHP (with javascript/ajax) to write files onto the local file system. However, this means that the website must also be hosted locally. Probably your best bet is Downloadify

Resources:

https://github.com/dcneiner/Downloadify

How to create xml file with jquery

Save content using Jquery? Write to file

Saving to server-side file using AJAX

Upvotes: 5

Related Questions