download folder from FE

apps/remix-ide/src/app/files/fileManager.ts

@@ -1,5 +1,6 @@
 'use strict'
 import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
@@ -344,12 +345,31 @@ class FileManager extends Plugin {
     }
   }
 
+  async zipDir(dirPath, zip) {
+    const filesAndFolders = await this.readdir(dirPath)
+    for(let path in filesAndFolders) {
+      if (filesAndFolders[path].isDirectory) await this.zipDir(path, zip)
+      else {
+        path = this.normalize(path)
+        const content: any = await this.readFile(path)
+        zip.file(path, content)
+      }
+    }
+  }
+
   async download(path) {
     try {
-      const fileName = helper.extractNameFromKey(path)
-      path = this.normalize(path)
-      const content: any = await this.readFile(path)
-      saveAs(new Blob([content]), fileName)
+      const downloadFileName = helper.extractNameFromKey(path)
+      if (await this.isDirectory(path)) {
+          const zip = new JSZip()
+          await this.zipDir(path, zip)
+          const content = await zip.generateAsync({type: 'blob'})
+          saveAs(content, `${downloadFileName}.zip`)
+        } else {
+          path = this.normalize(path)
+          const content: any = await this.readFile(path)
+          saveAs(new Blob([content]), downloadFileName)
+        }
     } catch (e) {
       throw new Error(e)
     }
@@ -377,9 +397,9 @@ class FileManager extends Plugin {
   /**
    * Get the list of files in the directory
    * @param {string} path path of the directory
-   * @returns {string[]} list of the file/directory name in this directory
+   * @returns {Object} list of the file/directory name in this directory e.g; {contracts/1_Storage.sol:{isDirectory: false}}
    */
-  async readdir(path) {
+  async readdir(path): Promise<Record<string, Record<string, boolean>>> {
     try {
       path = this.normalize(path)
       path = this.limitPluginScope(path)

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -27,7 +27,7 @@ export const contextMenuActions: MenuItems = [{
 },{
   id: 'download',
   name: 'Download',
-  type: ['file'],
+  type: ['file', 'folder'],
   multiselect: false,
   label: ''
 }, {