browser-nativefs

Browser-NativeFS

Use the Native File System API with legacy fallback in the browser.

Usage

import {
  fileOpenPromise,
  fileSavePromise,
  imageToBlob
} from 'https://unpkg.com/browser-nativefs';

(async () => {
  const fileOpen = (await fileOpenPromise).default;
  const fileSave = (await fileSavePromise).default;

  const openButton = document.querySelector('#open');
  const saveButton = document.querySelector('#save');

  openButton.addEventListener('click', async (e) => {
    try {
      const blob = await fileOpen({mimeTypes: ['image/*']});
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      document.body.append(img);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err);
      }
    }
  });

  saveButton.addEventListener('click', async (e) => {
    const blob = await imageToBlob(document.querySelector('img'));
    try {
      await fileSave(blob, {fileName: 'Untitled.png'});
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err);
      }
    }
  });

  openButton.disabled = false;
  saveButton.disabled = false;
})();

License

Apache 2.0.