download file to local device

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

@@ -1,4 +1,5 @@
 'use strict'
+import { saveAs } from 'file-saver'
 import { Plugin } from '@remixproject/engine'
 import * as packageJson from '../../../../../package.json'
 import Registry from '../state/registry'
@@ -343,6 +344,17 @@ class FileManager extends Plugin {
     }
   }
 
+  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)
+    } catch (e) {
+      throw new Error(e)
+    }
+  }
+
   /**
    * Create a directory
    * @param {string} path path of the new directory

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

@@ -296,6 +296,15 @@ export const renamePath = async (oldPath: string, newPath: string) => {
   }
 }
 
+export const downloadPath = async (path: string) => {
+  const fileManager = plugin.fileManager
+  try {
+    await fileManager.download(path)
+  } catch (error) {
+    dispatch(displayPopUp('Oops! An error ocurred while downloading.' + error))
+  }
+}
+
 export const copyFile = async (src: string, dest: string) => {
   const fileManager = plugin.fileManager
 

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -12,7 +12,6 @@ import { checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath }
 import { FileRender } from './file-render'
 import { Drag } from "@remix-ui/drag-n-drop"
 import { ROOT_PATH } from '../utils/constants'
-import { saveAs } from 'file-saver'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const { name, contextMenuItems, removedContextMenuItems, files, fileState } = props
@@ -175,8 +174,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
-  const downloadPath = (path: string) => {
-    console.log('downloadPath', path)
+  const downloadPath = async (path: string) => {
+    try {
+      props.dispatchDownloadPath(path)
+    } catch (error) {
+      props.modal('Download Failed', 'Unexpected error while downloading: ' + typeof error === 'string' ? error : error.message, 'Close', async () => {})
+    }
   }
 
   const uploadFile = (target) => {

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

@@ -22,6 +22,7 @@ export const FileSystemContext = createContext<{
   dispatchCreateNewFolder: (path: string, rootDir: string) => Promise<void>,
   dispatchDeletePath: (path: string[]) => Promise<void>,
   dispatchRenamePath: (oldPath: string, newPath: string) => Promise<void>,
+  dispatchDownloadPath: (path:string) => Promise<void>,
   dispatchCopyFile: (src: string, dest: string) => Promise<void>,
   dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
   dispatchRunScript: (path: string) => Promise<void>,

libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx

@@ -6,7 +6,7 @@ import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { FileSystemContext } from '../contexts'
 import { browserReducer, browserInitialState } from '../reducers/workspace'
 import { initWorkspace, fetchDirectory, removeInputField, deleteWorkspace, clearPopUp, publishToGist, createNewFile, setFocusElement, createNewFolder,
-  deletePath, renamePath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace,
+  deletePath, renamePath, downloadPath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace,
   fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder,
   showAllBranches, switchBranch, createNewBranch, checkoutRemoteBranch, createSolidityGithubAction, createTsSolGithubAction, createSlitherGithubAction
 } from '../actions'
@@ -95,6 +95,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await renamePath(oldPath, newPath)
   }
 
+  const dispatchDownloadPath = async (path: string) => {
+    await downloadPath(path)
+  }
+
   const dispatchCopyFile = async (src: string, dest: string) => {
     await copyFile(src, dest)
   }
@@ -261,6 +265,7 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchCreateNewFolder,
     dispatchDeletePath,
     dispatchRenamePath,
+    dispatchDownloadPath,
     dispatchCopyFile,
     dispatchCopyFolder,
     dispatchRunScript,

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -516,6 +516,7 @@ export function Workspace () {
                   toast={global.toast}
                   dispatchDeletePath={global.dispatchDeletePath}
                   dispatchRenamePath={global.dispatchRenamePath}
+                  dispatchDownloadPath={global.dispatchDownloadPath}
                   dispatchUploadFile={global.dispatchUploadFile}
                   dispatchCopyFile={global.dispatchCopyFile}
                   dispatchCopyFolder={global.dispatchCopyFolder}
@@ -555,6 +556,7 @@ export function Workspace () {
                   toast={global.toast}
                   dispatchDeletePath={global.dispatchDeletePath}
                   dispatchRenamePath={global.dispatchRenamePath}
+                  dispatchDownloadPath={global.dispatchDownloadPath}
                   dispatchUploadFile={global.dispatchUploadFile}
                   dispatchCopyFile={global.dispatchCopyFile}
                   dispatchCopyFolder={global.dispatchCopyFolder}

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

@@ -96,6 +96,7 @@ export interface FileExplorerProps {
     toast: (toasterMsg: string) => void,
     dispatchDeletePath: (path: string[]) => Promise<void>,
     dispatchRenamePath: (oldPath: string, newPath: string) => Promise<void>,
+    dispatchDownloadPath: (path: string) => Promise<void>,
     dispatchUploadFile: (target?: React.SyntheticEvent, targetFolder?: string) => Promise<void>,
     dispatchCopyFile: (src: string, dest: string) => Promise<void>,
     dispatchCopyFolder: (src: string, dest: string) => Promise<void>,