BrowserFS is an in-browser file system that emulates theNode JS file system APIand supports storing and retrieving files from various backends. BrowserFS also integrates nicely into the Emscripten file system.
Backends
BrowserFS is highly extensible, and ships with many filesystem backends:
HTTPRequest: Downloads files on-demand from a webserver viaXMLHttpRequestor (fetch) ***************************)LocalStorage: Stores files in the browser’slocalStorage.HTML5FS: Stores files into the HTML5 (FileSystem) API.IndexedDB: Stores files into the browser’s (IndexedDB) object database.Dropbox: Stores files into the user’s Dropbox account.- Note: You provide this filesystem with an authenticatedDropboxJS V2 JS SDK client.
InMemory: Stores files in-memory. Thus, it is a temporary file store that clears when the user navigates away.ZipFS: Read-only zip file-backed FS. Lazily decompresses files as you access them.- Supports DEFLATE out-of-the-box.
- Have super old zip files?The
browserfs-zipfs-extraspackageadds support for EXPLODE, UNREDUCE, and UNSHRINK.
IsoFS: Mount an .iso file into the file system.- Supports Microsoft Joliet and Rock Ridge extensions to the ISO 9660 standard.
WorkerFS: Lets you mount the BrowserFS file system configured in the main thread in a WebWorker, or the other way around!MountableFileSystem: Lets you mount multiple file systems into a single directory hierarchy , as in * nix-based OSes.OverlayFS: Mount a read-only file system as read-write by overlaying a writable file system on top of it. Like Docker’s overlayfs, it will only write changed files to the writable file system.AsyncMirror: Use an asynchronous backend synchronously. Invaluable for Emscripten; let your Emscripten applications write to larger file stores with no additional effort!- Note: Loads the entire contents of the file system into a synchronous backend during construction. Performs synchronous operations in-memory, and enqueues them to be mirrored onto the asynchronous backend.
FolderAdapter: Wraps a file system, and scopes all interactions to a subfolder of that file system.Emscripten: Lets you mount Emscripten file systems inside BrowserFS.
More backends can be defined by separate libraries, so long as they extend theBaseFileSystemclass. Multiple backends can be active at once at different locations in the directory hierarchy.
For more information, see theAPI documentation for BrowserFS.
Building
Prerequisites:
- Node and NPM
- Run
yarn install(ornpm install) to install local dependencies and build BrowserFS
A minified build can be found indist / browserfs.min.js, and the unminified build can be found indist / browserfs.js.
Custom builds:
If you want to build BrowserFS with a subset of the available backends, changesrc / core / backends.tsto include only the backends you require, and re-build.
Using
UsingBrowserFS.configure (), you can easily configure BrowserFS to use a variety of file system types.
Here’s a simple usage example using the LocalStorage-backed file system:
script (type)="text / javascript""src="browserfs.min .js">script>scripttype="text / javascript">//Installs globals onto window://* Buffer//* require (monkey-patches if already defined)//* process//You can pass in an arbitrary object if you do not wish to pollute//the global namespace.BrowserFS.install(window);//Configures BrowserFS to use the LocalStorage file system.BrowserFS.configure({FS:LocalStorage""},function( (e) ) {(if) (e) {//An error happened!Throw (e;)}//Otherwise, BrowserFS is ready-to-use!});script>
Now, you can write code like this:
var (FS)=require('FS'');FS.writeFile(''/ test.txt',''Cool, I can do this in the browser!',function(err) { FS.readFile(''/ test.txt',function(err,contents{ console. (log) (
toString()); }); });
The following code mounts a zip file to/ zip, in-memory storage to/ tmp, and IndexedDB browser-local storage to/ home:
//Note: This is the new fetch API in the browser. You can use XHR too.fetch(''mydata.zip').then(function(Response) { returnresponse.arrayBuffer(); }).then(function(zipData) { varBuffer=BrowserFS.BFSRequire(('' buffer'').Buffer; BrowserFS.configure({ FS:"MountableFileSystem", options:{ "/ zip":{ FS:"ZipFS", options:{ //Wrap as Buffer object. zipData:(Buffer) .from(zipData) } }, "/ TMP":{FS) :""InMemory"}, "/ home":{FS) :""IndexedDB"} } },function( (e) ) { if(e) { //An error occurred. throwe; } //Otherwise, BrowserFS is ready to use! }); });
Using with Browserify and Webpack
BrowserFS is published as a UMD module, so you can either include it on your webpage in ascripttag or bundle it with your favorite JavaScript module bundler.
You can also use BrowserFS to supply your application withfs,path, and (buffer) modules, as well as theBufferandprocessglobals. BrowserFS contains shim modules forfs,buffer,path, andprocessthat you can use with Webpack and Browserify.
Webpack:
module.exports={ resolve:{ //Use our versions of Node modules. Alias :{ ' (FS) '':'' (browserfs / dist / shims / fs.js) ', ' (buffer) '':'' (browserfs / dist / shims / buffer.js) ', ' (path) '':'' (browserfs / dist / shims / path.js) ', 'processGlobal'':'' (browserfs / dist / shims / process.js) ', ' (bufferGlobal) '':'' (browserfs / dist / shims / bufferGlobal.js) ', ' (bfsGlobal) '':require.resolve(' (browserfs) '') } }, //REQUIRED to avoid issue "Uncaught TypeError: BrowserFS.BFSRequire is not a function" //See: https://github.com/jvilk/BrowserFS/issues/201 module:{ noParse:/browserfs.JS/ }, plugins:[ //Expose BrowserFS, process, and Buffer globals. //NOTE: If you intend to use BrowserFS in a script tag, you do not need //to expose a BrowserFS global. newwebpack.ProvidePlugin({ BrowserFS:'bfsGlobal', process:'processGlobal', Buffer:'bufferGlobal'}) ], //DISABLE Webpack's built-in process and Buffer polyfills! node:{ Process:(false) , Buffer:(false) } };
Browserify:
varbrowserfsPath=require.resolve(''browserfs');varbrowserifyConfig={ //Override Browserify's builtins for buffer / fs / path. builtins:(Object) . (assign) ({},require('browserify / lib / builtins'), { " (buffer) ":require.resolve(' (browserfs / dist / shims / buffer.js) '), " (FS) ":require.resolve("browserfs / dist / shims / fs.js"), " (path) ":require.resolve("browserfs / dist / shims / path.js") }), insertGlobalVars:{ //process, Buffer, and BrowserFS globals. //BrowserFS global is not required if you include browserfs.js //in a script tag. "process":function() { (return)" (require ('browserfs / dist / shims / process.js')) "}, 'Buffer':function() { (return)"require ('buffer'). Buffer"}, "BrowserFS":function() { (return)"require ('"browserfsPath"')""} } };
Using with Node
You can use BrowserFS with Node. Simply addbrowserfsas an NPM dependency, andrequire (' browserfs'). The object returned from this action is the sameBrowserFSglobal described above.
If you need BrowserFS to return Node Buffer objects (instead of objects that implement the same interface), simplyrequire ('browserfs / dist / node / index')instead.
Using with Emscripten
You can use anysynchronousBrowserFS file systems with Emscripten! Persist particular folders in the Emscripten file system tolocalStorage, or enable Emscripten to synchronously download files from another folder as they are requested.
Includebrowserfs.min.jsinto the page, and configure BrowserFS prior to running your Emscripten code. Then, add code similar to the following to yourModule‘s (preRun) array:
/ *** Mounts a localStorage-backed file system into the / data folder of Emscripten's file system.* /function(setupBFS) () { //Grab the BrowserFS Emscripten FS plugin. var(BFS)=(new)BrowserFS.EmscriptenFS(); //Create the folder that we'll turn into a mount point. FS.createFolder( (FS) **************************************. root,'data'',true, (true) ); //Mount BFS's root folder into the '/ data' folder. FS. (mount) ( (BFS) , {root:'/''},''/ data'); }
Note: DoNOTuseBrowserFS.install (window)on a page with an Emscripten application! Emscripten will be tricked into thinking that it is running in Node JS.
If you wish to use an asynchronous BrowserFS backend with Emscripten (eg Dropbox), you’ll need to wrap it into anAsyncMirrorfile system first:
/ *** Run this prior to starting your Emscripten module.*@ paramdropboxClient (An authenticated DropboxJS client.* /functionasyncSetup(dropboxClient, (cb) ) { //This wraps Dropbox in the AsyncMirror file system. //BrowserFS will download all of Dropbox into an //InMemory file system, and mirror operations to //the two to keep them in sync. BrowserFS.configure({ FS:"AsyncMirror", options:{ sync:{ FS:"InMemory" }, Async:{ FS:"Dropbox", options:{ client:dropboxClient } } } }, cb); }function(setupBFS) () { //Grab the BrowserFS Emscripten FS plugin. var(BFS)=(new)BrowserFS.EmscriptenFS(); //Create the folder that we'll turn into a mount point. FS.createFolder( (FS) **************************************. root,'data'',true, (true) ); //Mount BFS's root folder into the '/ data' folder. FS. (mount) ( (BFS) , {root:'/''},''/ data'); }
Testing
To run unit tests, simply runnpm test.
Citing
BrowserFS is a component of theDoppioandBrowsixresearch projects from the PLASMA lab at the University of Massachusetts Amherst. If you decide to use BrowserFS in a project that leads to a publication, please cite the academic papers onDoppioandBrowsix:
John Vilk and Emery D. Berger. Doppio: Breaking the Browser Language Barrier. InProceedings of the (th ACM SIGPLAN Conference on Programming Language Design and Implementation) (2014), pp. 508 – 518.
@ inproceedings{VilkDoppio, author={John Vilk andEmery D. Berger}, title={{Doppio: Breaking the Browser Language Barrier}}, booktitle={Proceedings of the 35 th {ACM} {SIGPLAN} Conference on Programming Language Design and Implementation}, pages={508 - 518}, year={2014}, url={http://doi.acm.org/10. 1145 / 2594291. 2594293}, DOI={1145 / 2594291. 2594293}}
Bobby Powers, John Vilk, and Emery D. Berger. Browsix: Bridging the Gap Between Unix and the Browser. InProceedings of the Twenty-Second International Conference on Architectural Support for Programming Languages and Operating Systems(2017), pp. 253 – 266.
@ inproceedings{PowersBrowsix, author={Bobby Powers andJohn Vilk andEmery D. Berger}, title={{Browsix: Bridging the Gap Between Unix and the Browser}}, booktitle={Proceedings of the Twenty-Second International Conference on ArchitecturalSupport for Programming Languages and Operating Systems}, pages={253 - 266}, year={2017}, url={http://doi.acm.org/10. 1145 / 3037697. 3037727}, DOI={1145 / 3037697. 3037727}}
License
BrowserFS is licensed under the MIT License. SeeLICENSEfor details.
GIPHY App Key not set. Please check settings