matthewp / fs

File system abstraction layer for the browser

fs-web

Bringing a file system abstraction to the browser. fs is a module that allows you to store data in the (modern) browser using an API similar to that of Node's fs module

Implemented in a cross-browser fashion, using IndexedDB.

Installation

Install via npm:

npm install fs-web --save

Example

Writing from a file input.

import { writeFile } from 'fs-web';

let input = document.querySelector('input[type="file"]'); 
input.addEventListener('change', function(e) {
  let file = this.files[0]; // file is a File object.

  writeFile(file.name, file).then(function() {
    // All done! File has been saved.
  });
});

Writing and reading.

import * as fs from 'fs-web';

fs.writeFile('foo/some-file.txt', 'foo')
  .then(function(){
    return fs.readdir('foo');
  })
  .then(function(files){
    files // -> [ {some-file.txt} ]
  });

API

All methods return a Promise.

fs.writeFile(fileName, data)

Saves the file data with the name fileName and returns a Promise. If an error is encountered, the Promise will be rejected with an Error object.

fs.readFile(fileName)

Retrieves the file with the name fileName and returns a Promise. The Promise will resolve with the file's data as an ArrayBuffer.

fs.readString(fileName)

Retrieves the file with the name fileName and returns a Promise. The Promise will resolve with a string representation of fileName.

fs.removeFile(fileName)

Removes the file with the name fileName from storage and returns a Promise. The Promise will resolve even if the fileName doesn't exist.

fs.readdir(fullPath)

Gets the contents of fullPath and returns a Promise. The Promise will resolve with an array of DirectoryEntry objects (see below).

fs.mkdir(fullPath)

Creates a directory at fullPath and returns a Promise.

fs.rmdir(fullPath)

Removes the directory at fullPath, recursively removing any files/subdirectories contained within. Returns a Promise that will resolve when the fullPath is removed.

DirectoryEntry

A DirectoryEntry object is resolved from fs.readdir and represents either a file or a directory. A DirectoryEntry instance contains these properties/methods:

DirectoryEntry#path

The path property is the full path (including file name) for the given file/directory entry.

DirectoryEntry#name

The name of the given entry, either the file or directory name.

DirectoryEntry#dir

The given directory that the file/directory sits in.

DirectoryEntry#type

The type of the entry, either file or directory.

DirectoryEntry#readFile()

A convenience method for calling readFile(fileName). Throws a TypeError if the entry is not of type file.

License

BSD 2 Clause

fs's Issues

create readFileSync

Cant install anymore

Please change in package.json

"path": "git://github.com/component/path#7b4f23c38833a5232cd5e3d50ccb8cd13dbcd2f4"
to
"path": "https://github.com/component/path#7b4f23c38833a5232cd5e3d50ccb8cd13dbcd2f4"

fs.readFileSync

add fs.readFileSync

createReadStream

Would be nice to have something like Node's createReadStream that allows reading to happen in chunks, especially for videos and other large files.

Bower de-registration

Hi,

I am registering browserify-ied nodejs core modules to bower with their nodejs dep name (via the node2web mini-project), to make them easily and readily available to browsers and dependency aware tools/builders.

Could you please be kind enough to de-register your package from bower and rename it to something else, so that 'node2web_fs' can be registered under the proper nodejs dep name ?

Thanks in advance and sorry for the inconvenience. I think it will be a good thing for the whole community.

Purpose and how to use?

How to use?

What is the use and purpose of fs-web and when do you want to use it? I am asking this cause I am a bit confused. Do you use it with actual files? Or is it to create an abstract file system in the browser like CodeSandbox? If for example, I want to create a file system like this on the browser, where every file is an object, is fs-web built for that:

app/
├── routes/
│   ├── about.tsx
│   └── index.tsx
└── root.tsx

Or is it simply used for interacting with actual files in the browser?

Not loading using stealJS

I have an app that I am trying to run unit tests. The app uses CanJS and StealJS. I am using karma and jasmine. I can get everything to work to run a single test file, but I want it to work using multiple test files. To that end I tried including fs-web so that I could dynamically load all the unit test files. The module was crashing so I simplified things to this point.

import test1 from "tests/scripts/social/base-test";
import test2 from "tests/scripts/utils/path-test";
import fs from 'fs-web';

The file without the fs-web runs. As soon as I include the line to import fs-web, it throws an exception. (I also tried import * as fs from 'fs-web';) This exception happens when I run the test using karma runner. Everything looks better when it runs under node. The error I am getting is AMD module ... did not define.

'error', TypeError{line: 4342, sourceURL: 'http://localhost:9876/base/node_modules/steal/steal.js?d527490f310950704a06d564a96d5751d32ae8cf', stack: ' at instantiate (http://localhost:9876/base/node_modules/steal/steal.js?d527490f310950704a06d564a96d5751d32ae8cf:4342:77)
at instantiate (http://localhost:9876/base/node_modules/steal/steal.js?d527490f310950704a06d564a96d5751d32ae8cf:4663:36)
at instantiate (http://localhost:9876/base/node_modules/steal/steal.js?d527490f310950704a06d564a96d5751d32ae8cf:5751:34)
at instantiate (http://localhost:9876/base/node_modules/steal/steal.js?d527490f310950704a06d564a96d5751d32ae8cf:5201:32)...

sync

does this allow me to push updates from the server to the "file" on the browser ?

APIs appear to be doing nothing

I am testing this on Chrome browser and basically APIs work without throwing any error however they seem to be doing nothing. For example, readFile or mkdir don't throw but the result is no-op. Is there anything I might be missing in terms of setup, configurations, etc.? Thanks!