Simple Text Editor using File System Access API
Last Updated :
31 Jul, 2023
In this article, we will create a simple text editor like application that we can use to open, edit, and save text files with the help of File System Access API.
File System Access API enables us to interact with files on our local devices like photo and video editors. When the user gives permission, this helps us to read or save changes directly to files and folders on the local storage. Using this API we can read, write, modify, and also we can open a directory to modify its content.
We will create this application in three steps.
- Make a general structure using HTML.
- Give a general style using CSS.
- Writing some code in JavaScript with the help of File System Access API.
HTML code: We will use HTML to design the web page structure or layout. Create a container with a text area and two buttons to open the file and save the file.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="container">
<!--Text Area -->
<textarea id="content"
placeholder="Lets Write ">
</textarea>
<!--Buttons -->
<div class="buttons">
<!--To open -->
<button id="openfile">
Open
</button>
<!-- To save-->
<button id="savefile">
Save
</button>
</div>
</div>
</body>
</html>
CSS code: CSS is used to give general styling and make it more visually appealing. Give general styling to the whole page like color and alignment. We use flex to center the elements. Include the following in the above HTML code in the style section of the head part of the code.
CSS
/* General Alignment to container
using flexbox */
.container{
display: flex;
height: 100vh;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
/* Styling to the textarea */
textarea {
width: 90vw;
color: #777;
font-size: 1.1rem;
min-height: 20rem;
border: 2px dashed rgba(0, 0, 0, 0.2);
padding: 1.5rem;
}
/* Aligning buttons to center */
.buttons{
width: 100%;
display: flex;
justify-content: center;
}
/* General styling to button */
button{
margin:0 0.5rem;
font-size: 1.1rem;
font-weight: 800;
background-color: blue;
color: #ffffff;
padding: 1rem 1.5rem;
}
Output:
JavaScript: We will use filesystem API to open, edit, and save the file. We will break our JavaScript code into three steps.
- Creating variables and get access to elements with id, open files, and save the file.
- To create a function to open the file.
- To create a function to close the file
Step 1: Getting access to the elements
HTML
const openFile = document.getElementById('openfile');
const saveFile = document.getElementById('savefile');
const contentTextArea = document.getElementById('content');
let fileHandle;
Step 2: It demonstrates a function to open the file. To open a file, first we need to prompt the user to select a file. For this, we will use the showOpenFilePicker() method. This method will return an array of filehandles.
Now we have a filehandle, so we can access the file itself by using the method filehandle.getFile() it returns the file object, which contains a blob. To access the data we will use method text().
HTML
const open = async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
contentTextArea.value = contents;
}
Step 3: It demonstrates the function to save the file. To save the file we will use the showSaveFilePicker() method. We also want to save it in .txt format, so we will provide some optional parameters.
Now we have to write the file on a disk for this we will use the FileSystemWritableFileStream object. We will create a stream by calling the createWritable() method. When this method is called, it will check for write permission if permission is not given it will ask the user for permission. If permission is denied, it will throw an exception. Then we will write the contents of the file to the stream using the write() method. We will close the writable stream and will return the handle.
HTML
const save = async content => {
try {
const handle = await window.showSaveFilePicker({
types: [
{
accept: {
'text/plain': ['.txt'],
},
},
],
})
// Create a FileSystemWritableFileStream to write
const writable = await handle.createWritable();
// Write the contents of the file to the stream
await writable.write(content);
// Close the file and write the contents to disk
await writable.close();
return handle;
} catch (err) {
console.error(err.name);
}
}
At the end, we will associate the open and save method to our variable open file and save file.
HTML
openFile.addEventListener('click', () => open());
saveFile.addEventListener('click',
() => save(contentTextArea.value));
Output: So our editor is ready now.
https://github.com/Nandini-72/Notepad
Similar Reads
How to Access the File System in Node.js ? In this article, we looked at how to access the file system in NodeJS and how to perform some useful operations on files. Prerequisite: Basic knowledge of ES6Basic knowledge of NodeJS NodeJS is one of the most popular server-side programming frameworks running on the JavaScript V8 engine, which uses
3 min read
Upload and Download files from Google Drive storage using Python In this article, we are going to see how can we download files from our Google Drive to our PC and upload files from our PC to Google Drive using its API in Python. It is a REST API that allows you to leverage Google Drive storage from within your app or program. So, let's go ahead and write a Pytho
6 min read
How to set a value to an input file using HTML? In HTML, we will use the type attribute to take input in a form and when we have to take the file as an input, the file value of the type attribute allows us to define an element for the file uploads. It displays a browse button on our computer screen, and when we click on it, it asks the user for p
2 min read
script.aculo.us InPlaceEditor The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Ajax.InPlaceEditor is used to make elements editable thereby allowing the user to edit the content on the page and submit the changes to the server. The InPlaceEditor class is used to d
2 min read
Explain about Read and Write of a file using JavaScript Handling file operations such as reading and writing is a common requirement in many JavaScript applications, especially on the server side using Node.js. This article explains how to perform these operations using Node.js's built-in fs (File System) module. The fs ModuleThe fs module provides an AP
3 min read
How to save file with file name from user using Python? Prerequisites: File Handling in PythonReading and Writing to text files in Python Saving a file with the user's custom name can be achieved using python file handling concepts. Python provides inbuilt functions for working with files. The file can be saved with the user preferred name by creating a
5 min read
Storage Access Framework in Android 13 Storage Access Framework is first introduced in Android 4.4, but has come a long way, and has hugely improved in Android 13. Users can easily browse and open documents, photos, and other files from any of their favorite document storage providers thanks to the SAF. Users may browse files and access
5 min read
What is File System Module in Node.js ? Node.js is a powerful platform for building server-side applications, and one of its key features is its ability to interact with the file system. The File System (fs) module in Node.js provides an extensive API to work with files and directories, allowing developers to perform operations such as re
3 min read
Nano Text Editor in Linux In the vast world of Linux text editors, Nano stands out as a simple yet powerful tool for editing files directly from the command line interface. Whether you're a novice user or an experienced developer, Nano offers a straightforward and efficient editing experience. In this article, we'll delve in
8 min read
Levels in a File Management System Prerequisite - File System The management of files and the management of device are interlinked with each other. Given below is an hierarchy used to perform the required functions of an I/O system efficiently. The highest level module called Basic File System passes the information given to it to Lo
4 min read