Mongo-db-filesystem-ui NPM

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();

back to contents

button image

explorer dialog image

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);

back to contents