How do I save a file to a specific directory in JavaScript?

The is a storage endpoint private to the origin of the page, providing optional access to a special kind of file that is highly optimized for performance, for example, by offering in-place and exclusive write access to a file's content.

Storing data in the OPFS is similar to storing data in any other browser-provided storage mechanism that's private to the origin of the page (for example the IndexedDB API). This means that files in the OPFS differ from files selected using a picker in the following ways:

• Permission prompts are not required to access files in the OPFS.
• Clearing data for the site deletes the OPFS.
• The OPFS is subject to browser quota restrictions.

Files can be manipulated inside the OPFS via a three-step process:

1. The

   const pickerOpts = {
     types: [
       {
         description: 'Images',
         accept: {
           'image/*': ['.png', '.gif', '.jpeg', '.jpg']
         }
       },
     ],
     excludeAcceptAllOption: true,
     multiple: false
   };
   
   async function getTheFile() {
     // open file picker
     [fileHandle] = await window.showOpenFilePicker(pickerOpts);
   
     // get file contents
     const fileData = await fileHandle.getFile();
   }
   

   5 method, which is obtained using

   const pickerOpts = {
     types: [
       {
         description: 'Images',
         accept: {
           'image/*': ['.png', '.gif', '.jpeg', '.jpg']
         }
       },
     ],
     excludeAcceptAllOption: true,
     multiple: false
   };
   
   async function getTheFile() {
     // open file picker
     [fileHandle] = await window.showOpenFilePicker(pickerOpts);
   
     // get file contents
     const fileData = await fileHandle.getFile();
   }
   

   6 in a worker or the main thread, returns a reference to a FileSystemDirectoryHandle object allowing access to a directory and its contents — this represents the root of the OPFS.
2. The

   const pickerOpts = {
     types: [
       {
         description: 'Images',
         accept: {
           'image/*': ['.png', '.gif', '.jpeg', '.jpg']
         }
       },
     ],
     excludeAcceptAllOption: true,
     multiple: false
   };
   
   async function getTheFile() {
     // open file picker
     [fileHandle] = await window.showOpenFilePicker(pickerOpts);
   
     // get file contents
     const fileData = await fileHandle.getFile();
   }
   

   8 method is invoked to return a FileSystemFileHandle object representing a handle to a specific file in the directory.
3. The

   const dirName = 'directoryToGetName';
   
   // assuming we have a directory handle: 'currentDirHandle'
   const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
   

   0 method is invoked on that file handle, and returns a

   const dirName = 'directoryToGetName';
   
   // assuming we have a directory handle: 'currentDirHandle'
   const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
   

   1 object that can be used to read and write to the file. This is a high-performance handle for synchronous read/write operations (the other handle types are asynchronous). The synchronous nature of this class brings performance advantages intended for use in contexts where asynchronous operations come with high overhead (for example, WebAssembly). Note that it is only usable inside dedicated Web Workers.

While browsers typically implement this by persisting the contents of the OPFS to disk somewhere, it is not intended that the contents be easily user-accessible. While the browser might make it seem that there are files, they might be stored in a database or any other data structure. You cannot expect to find the created files matched one-to-one somewhere on the hard disk.

Note: Writes performed using

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

There is also "save" functionality:

• In the case of the asynchronous handles, use the

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  4 interface. Once the data you'd like to save is in a format of

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  5,

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  6 object, string literal or

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  7, you can open a stream and save the data to a file. This can be the existing file or a new file.
• In the case of the synchronous

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  1, you write changes to a file using the

  const dirName = 'directoryToGetName';
  
  // assuming we have a directory handle: 'currentDirHandle'
  const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});
  

  9 method. You can optionally also call

  async function returnPathDirectories(directoryHandle) {
  
    // Get a file handle by showing a file picker:
    const [handle] = await self.showOpenFilePicker();
    if (!handle) {
      // User cancelled, or otherwise failed to open a file.
      return;
    }
  
    // Check if handle exists inside directory our directory handle
    const relativePaths = await directoryHandle.resolve(handle);
  
    if (relativePaths === null) {
      // Not inside directory handle
    } else {
      // relativePaths is an array of names, giving the relative path
  
      for (const name of relativePaths) {
        // log each entry
        console.log(name);
      }
    }
  }
  

  0 if you need the changes committed to disk at a specific time (otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases).

FileSystemHandle

The FileSystemHandle interface is an object which represents an entry. Multiple handles can represent the same entry. For the most part you do not work with FileSystemHandle directly but rather its child interfaces FileSystemFileHandle and FileSystemDirectoryHandle.

Provides a handle to a file system entry.

provides a handle to a file system directory.

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

Provides a synchronous handle to a file system entry, which operates in-place on a single file on disk. The synchronous nature of the file reads and writes allows for higher performance for critical methods in contexts where asynchronous operations come with high overhead, e.g., WebAssembly. This class is only accessible inside dedicated Web Workers for files within the .

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

is a

async function saveFile() {

  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

The below code allows the user to choose a file from the file picker and then tests to see whether the handle returned is a file or directory

// store a reference to our file handle
let fileHandle;

async function getFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker();

  if (fileHandle.kind === 'file') {
    // run file code
  } else if (fileHandle.kind === 'directory') {
    // run directory code
  }

}

The following asynchronous function presents a file picker and once a file is chosen, uses the

async function saveFile() {

  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

const pickerOpts = {
  types: [
    {
      description: 'Images',
      accept: {
        'image/*': ['.png', '.gif', '.jpeg', '.jpg']
      }
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false
};

async function getTheFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();
}

The following example returns a directory handle with the specified name. If the directory does not exist, it is created.

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

The following asynchronous function uses

async function saveFile() {

  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

async function returnPathDirectories(directoryHandle) {

  // Get a file handle by showing a file picker:
  const [handle] = await self.showOpenFilePicker();
  if (!handle) {
    // User cancelled, or otherwise failed to open a file.
    return;
  }

  // Check if handle exists inside directory our directory handle
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // Not inside directory handle
  } else {
    // relativePaths is an array of names, giving the relative path

    for (const name of relativePaths) {
      // log each entry
      console.log(name);
    }
  }
}

The following asynchronous function opens the save file picker, which returns a FileSystemFileHandle once a file is selected. A writable stream is then created using the

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

A user defined

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

async function saveFile() {

  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

The following show different examples of options that can be passed into the

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

// just pass in the data (no options)
writableStream.write(data);

// writes the data to the stream from the determined position
writableStream.write({ type: "write", position, data });

// updates the current file cursor offset to the position specified
writableStream.write({ type: "seek", position });

// resizes the file to be size bytes long
writableStream.write({ type: "truncate", size });

This example synchronously reads and writes a file to the .

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

• Creates a synchronous file access handle.
• Gets the size of the file and creates an

  async function saveFile() {
  
    // create a new handle
    const newHandle = await window.showSaveFilePicker();
  
    // create a FileSystemWritableFileStream to write to
    const writableStream = await newHandle.createWritable();
  
    // write our file
    await writableStream.write(imgBlob);
  
    // close the file and write the contents to disk.
    await writableStream.close();
  }
  

  7 to contain it.
• Reads the file contents into the buffer.
• Encodes the message and writes it to the end of the file.
• Persists the changes to disk and closes the access handle.

onmessage = async (e) => {
  // retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file in OPFS
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle('draft.txt', { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
}

Note: In earlier versions of the spec,

async function saveFile() {

  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

async function returnPathDirectories(directoryHandle) {

  // Get a file handle by showing a file picker:
  const [handle] = await self.showOpenFilePicker();
  if (!handle) {
    // User cancelled, or otherwise failed to open a file.
    return;
  }

  // Check if handle exists inside directory our directory handle
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // Not inside directory handle
  } else {
    // relativePaths is an array of names, giving the relative path

    for (const name of relativePaths) {
      // log each entry
      console.log(name);
    }
  }
}

// just pass in the data (no options)
writableStream.write(data);

// writes the data to the stream from the determined position
writableStream.write({ type: "write", position, data });

// updates the current file cursor offset to the position specified
writableStream.write({ type: "seek", position });

// resizes the file to be size bytes long
writableStream.write({ type: "truncate", size });

// just pass in the data (no options)
writableStream.write(data);

// writes the data to the stream from the determined position
writableStream.write({ type: "write", position, data });

// updates the current file cursor offset to the position specified
writableStream.write({ type: "seek", position });

// resizes the file to be size bytes long
writableStream.write({ type: "truncate", size });

How to save file in specific folder in JavaScript?

How do I save a file to a specific location?

How do I save a file to a specific folder in node JS?

How to save file with JavaScript?