The topic of today’s article is FileSystem api. I think everyone has heard about it, but few have tried to work with this api due to its poor support in browsers. At the moment FileSystem api is only supported in google chrome browser. But even despite this, I will still tell and show how to work with it, since this is a rather interesting api that appeared along with the html5 standards. From this article, I will begin to convey information to you in a new format. I hope you appreciate! Go!

In order to start working with the fileSystem Api, let’s check its support in the browser! To do this, run the following code:

console.log(«fileSystem api supported!»);
console.log(«fileSystem api not supported!»);

Here we are accessing the fileSystem api using the special webkit prefix, as I wrote at the moment, support is only available in the google chrome browser.


This is the main object for working with the fileSystem api. After making sure that everything is supported, we proceed to work.

We need a server, you can use a local one. It is worth noting that the file system is formed for each domain. That is, you will not be able to exchange data from file systems with different domains. These are the same restrictions as for cookies and localStorage.

We turn to the file system, get all the folders and files from the filesystem root directory.

function error(err){
console log(err);

function success(file){
var fileSystem = file.root.createReader();
fileSystem.readEntries (function(results) {
console log(results);


window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, success, error);

After executing this code, an array with all the folders and files of the system will be displayed in the browser console. Right now, nothing is written in our file system, so an empty array will be displayed. This design:

window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, success, error);

will appear in all transactions. The first argument is window.TEMPORARY — this is the key (type) of the availability of the file storage. It can also take the value window.PERSISTENT.

window.TEMPORARY — the key at which data can be deleted at the discretion of the browser, if for example there is not enough space.

window.PERSISTENT — the key in which data is deleted only with the permission of the user of the resource, additional quota settings are needed here.

I will deal with the work only with the window.TEMPORARY key! I’ll leave the PERSISTENT key as your homework.

The second argument (1024*1024) is the size of the required memory (in bytes) for our file system.

The last two arguments of the function:

success — upon successful processing

error — a function for outputting errors to the console

We are interested in the success function. Here with this line

var fileSystem = file.root.createReader();

we get the root directory of the file system into the fileSystem variable and then read the files using the readEntries method.

As a result, an array of data is returned to us. Great, let’s move on!

Consider creating files in the filesystem. For the convenience of work, I will create my own function for each operation.

function createFile(name, content, type){
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, function(file){
var strblob = new Blob([content], {
type: type
file.root.getFile(name, {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
}, error);
}, error);

createFile(«test.html», «

FileSystem api secret page! Shhh…

«, «text/html»);

In this example, I created a function, when called, the test.html file will be created in the file system with the content «FileSystem api secret page! Shhh…» and a link to the file is displayed in the console. As you can see, it takes three arguments:

— file name

— file contents

— file type

The file type is needed to convert a string to a blob object, it is in this format that the contents of the file are written.

To create a file, the getFile() method is used and its arguments are:

— file name

— an object with options, to create a file, you must specify the create key with the value true.

— callback functions, success and error

Upon successful processing, a file will be created and a fileEntry link will be returned to it, then it will be possible to record data.

This is done using the createWriter() method, we open the file for writing, get the fileWriter object, and use the write() method to write data in blob format.