Open file from local system and save changes to file that opened

https://manajmnt-code.blogspot.com/2021/04/open-file-from-local-system-and-save.html

In this code we will be learn how to use The File System Access API to open file from local system and save changes to file that opened,
in this example we are try with txt file:

<button onclick="openfile()" title="Open txt file">Openfile</button> <button onclick="savefile()" title="Open txt file">Save file</button> <textarea id="editor" style="width: 100%; height: 200px;" placeholder="open file..."></textarea> <script> let editor = document.getElementById("editor"); const openfile = async () => { [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); editor.value = contents; } const savefile = async () => { const writable = await fileHandle.createWritable(); await writable.write(editor.value); await writable.close(); } </script>

to save changes with keybord event Ctrl + s add this code as follows:

window.addEventListener("keydown" , e => {
if (e.key === 's' && e.metaKey) {
    e.preventDefault();
    savefile();
}

});

return to first exemple:

let editor = document.getElementById("editor");

const openfile = async () => {
    [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  editor.value = contents;

}

const savefile = async () => {
 
  const writable = await fileHandle.createWritable();
  await writable.write(editor.value);
  await writable.close();
}
window.addEventListener("keydown" , e => {
if (e.key === 's' && e.metaKey) {
    e.preventDefault();
    savefile();
}

});

file-system-access_API Framework_Front-End

Mami Mahfoud April 09, 2021

Open text file and Save as html file in your local device using File System Access API

https://manajmnt-code.blogspot.com/2021/04/open-text-file-and-save-as-html-file-in.html

in this exemple you can open text file from your local files in textarea and saving as html file in your in local device using File System Access API
<button id="open"> open File</button> <button id="saveas"> save as</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("open").onclick = function() { openFile() } async function openFile() { let fileHandle; [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); document.getElementById("textarea").value = contents; } document.getElementById("saveas").onclick = function() { saveFile() } async function saveFile() { const opts = { types: [{ description: 'html file', accept: {'text/html': ['.html']}, }], }; const newHandle = await window.showSaveFilePicker(opts); const writableStream = await newHandle.createWritable(); var textarea =document.getElementById("textarea").value await writableStream.write(textarea); await writableStream.close(); } </script>

file-system-access_API Framework_Front-End

Mami Mahfoud April 08, 2021

Open text (.txt) from local file and show content in textarea [ source code & demo ]

https://manajmnt-code.blogspot.com/2021/03/open-text-file-and-show-content-in.html

In this example we are using file system API to open a text file from local files and show content into textarea tag
<button id="open"> open File</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("open").onclick = function() { openFile() } async function openFile() { let fileHandle; [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); document.getElementById("textarea").value = contents; } </script>

file-system-access_API Framework_Front-End

Mami Mahfoud March 28, 2021

Save textarea content to local file using file system access API [ demo & source code ]

https://manajmnt-code.blogspot.com/2021/03/save-content-from-textarea-using-file.html

<button id="saveas"> save as</button> <textarea id="textarea" style="width:100%;height:300px">Free Online HTML editor autocomplete with CSS & JS</textarea> <script> document.getElementById("saveas").onclick = function() { saveFile() } async function saveFile() { const opts = { types: [{ description: 'html file', accept: {'text/html': ['.html']}, }], }; const newHandle = await window.showSaveFilePicker(opts); // create a FileSystemWritableFileStream to write to const writableStream = await newHandle.createWritable(); var textarea =document.getElementById("textarea").value await writableStream.write(textarea); // close the file and write the contents to disk. await writableStream.close(); } </script>

in this example i will be share with you how to can save text inside textarea tag in your local files as html file using file system access API

file-system-access_API Framework_Front-End

Mami Mahfoud March 26, 2021