Uploading Folders, JavaScript Programming Example of Uploading and Downloading in File Manager

webix.ready(function() {
  // use custom scrolls, optional
 if (webix.env.mobile) webix.ui.fullScreen();
 webix.CustomScroll.init();
  
  class CustomAddNewMenu extends fileManager.views["menus/addnewmenu"] {
      config() {
          // default UI
          const ui = super.config();

          // add "Upload folder" option
          const menu = ui.body;
          menu.data.push({
              id: "uploaddir",
              value: "Upload folder",
              icon: "webix_fmanager_icon mdi mdi-folder-upload-outline",
          });

          return ui;
      }
  }
  
  class Upload extends fileManager.services.Upload {
      initEvents(app, state) {
          super.initEvents(app, state);

          app.attachEvent("app:action", (name, info) => {
              if (name == "uploaddir") {
                  info = info || (state.path || "/");
                  app.getService("upload").folderDialog(info);
              }
          });
      }
      initUploader(app) {
          super.initUploader(app);

          this.dirUploader = webix.ui({
              view: "uploader",
              directory: true,
              apiOnly: true,
              upload: app.getService("backend").upload(),
              on: {
                  onAfterFileAdd: function(item) {
                      item.urlData = this.config.tempUrlData;
                  },
                  onUploadComplete: function() {
                      app.getService("progress").end();
                      const local = app.getService("local");
                      local.refresh(this.config.tempUrlData.id);
                      local.folders(true);
                  },
              },
          });

          this.dirUploader.$updateProgress = function(_, percent) {
              app.getService("progress").start(percent / 100);
          };
      }
      // required for DND of files and folders
      getUploader() {
          return this.dirUploader;
      }
      folderDialog(id) {
          this.dirUploader.config.tempUrlData = { id };
          this.dirUploader.fileDialog();
      }
  }

  var app = new fileManager.App({
      url: "https://docs.webix.com/filemanager-backend/",
      override: new Map([
          [fileManager.views["menus/addnewmenu"], CustomAddNewMenu],
          [fileManager.services.Upload, Upload],
      ]),
  });
  
  
  app.render(document.body);
});