mongo-db-filesystem-ui
v1.0.31
Published
[Introduction](#introduction)
Downloads
27
Readme
Contents
Introduction
mogo-db-filesystem-ui is a front end library use for building a "Windows like" File Explorer application for managing and browsing folders and files stored on a mongo-db-filesystem. It provides a graphical interface for the user to navigate and access the files stored in a mongoDB filsystem.
Example 1
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/mongo-db-filesystem-ui/js/fileSystem-min.js"></script>
<link href="https://unpkg.com/mongo-db-filesystem-ui/css/fileSystem.min.css" rel="stylesheet" />
<script src="index.js" defer></script>
</head>
<body>
<button class="mongo-fs-login-logout-register btn btn-primary">Mongo-Filesystem</button>
...
</body>
</html>
index.js
initFileSystem();
const fileSystemServices = new FileSystemServices();
fileSystemServices.enableNotepad();
Example 2
Add a textarea element to index.html
...
<body>
<button class="mongo-fs-login-logout-register btn btn-primary">Mongo-Filesystem</button>
<div>
<textarea
name="textEditor"
id="textEditor"
cols="30"
rows="10"
></textarea>
</div>
...
</body>
...index.js
initFileSystem();
const fsOptions = {
//Use to build the "Save as" type dropdown menu
listOfFileTypes: [
{
display: "Grapher plot (*.plt)",
ext: ".plt",
defaultFilename: "Grapher Plot",
},
{
display: "Data table (*.tbl)",
ext: ".tbl",
defaultFilename: "Data table",
},
],
//Use to build the "Open with" right click menu
listOfOpenWithTypes: [
{ name: "Text Editor", options: { encoding: "utf8", flag: "r" } },
{ name: "Grapher", options: { encoding: "utf8", flag: "r" } },
],
};
const fileSystemServices = new FileSystemServices(fsOptions);
fileSystemServices.enableNotepad();
class GrapherEditor extends Editor {
constructor(options) {
super(options);
const self = this;
//Associate save and saveas menu items with the editor
options.fs.addSaveMenuItem(self);
options.fs.addSaveAsMenuItem(self);
options.fs.registerEditor({ name: "Grapher", editor: self });
}
getData() {
return $("#textEditor").val();
}
setData(data, filename, ext, editorName) {
if (
ext === ".tbl" ||
ext === ".txt" ||
ext === ".plt" ||
editorName == "Grapher"
) {
if (ext === ".plt" || ext === ".txt" || ext === ".tbl") {
$("#textEditor").val(data);
}
if (ext === ".plt") {
this.currentFilename(filename);
}
}
}
}
const options = {};
options.fs = fileSystemServices;
options.editorName = "Grapher";
options.fileExtensions = [".plt", ".tbl", ".txt"];
new GrapherEditor(options);
Public Interface
FileSystemServices
FileSystemServices.addMongoFsMenuItems
FileSystemServices.addNotepadMenuItem
FileSystemServices.addSaveAsMenuItem
FileSystemServices.addSaveMenuItem
FileSystemServices.clearRefreshToken
FileSystemServices.connectFs
FileSystemServices.currentFilename
FileSystemServices.disconnectFs
FileSystemServices.enableNotepad
FileSystemServices.explorerDlg
FileSystemServices.getRefreshToken
FileSystemServices.isConnected
FileSystemServices.loginModalDlg
FileSystemServices.registerEditor
FileSystemServices.registerFs
FileSystemServices.registerModalDlg
FileSystemServices.save
FileSystemServices.saveAsDlg
FileSystemServices.setData
FileSystemServices.storeRefreshToken
Editor
Editor.currentFileModified
Editor.currentFilename
Editor.editorOpened
Editor.getData
Editor.getEditorData
Editor.getExtensions
Editor.initEditor
Editor.openFile
Editor.resetEditor
Editor.save
Editor.saveAs
Editor.setData
Editor.setExplorerDlgParent