upload folder icon

apps/remix-ide/src/app/tabs/locales/en/filePanel.json

@@ -43,6 +43,7 @@
   "filePanel.createNewFolder": "Create New Folder",
   "filePanel.publishToGist": "Publish all the current workspace files to a github gist",
   "filePanel.uploadFile": "Load a local file into current workspace",
+  "filePanel.uploadFolder": "Load a local folder into current workspace",
   "filePanel.updateGist": "Update the current [gist] explorer",
   "filePanel.viewAllBranches": "View all branches",
   "filePanel.createBranch": "Create branch",

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

@@ -400,6 +400,10 @@ export const uploadFile = async (target, targetFolder: string, cb?: (err: Error,
   })
 }
 
+export const uploadFolder = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void) => {
+  console.log('inside uploadFolder--target-->', target)
+}
+
 export const getWorkspaces = async (): Promise<{ name: string, isGitRepo: boolean, branches?: { remote: any; name: string; }[], currentBranch?: string }[]> | undefined => {
   try {
     const workspaces: { name: string, isGitRepo: boolean, branches?: { remote: any; name: string; }[], currentBranch?: string }[] = await new Promise((resolve, reject) => {

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

@@ -12,24 +12,30 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         action: 'createNewFile',
         title: 'Create New File',
         icon: 'far fa-file',
-        placement: 'top-start'
+        placement: 'top'
       },
       {
         action: 'createNewFolder',
         title: 'Create New Folder',
         icon: 'far fa-folder',
-        placement: 'top-end'
+        placement: 'top'
       },
       {
         action: 'publishToGist',
         title: 'Publish all the current workspace files to a github gist',
         icon: 'fab fa-github',
-        placement: 'bottom-start'
+        placement: 'top'
       },
       {
         action: 'uploadFile',
         title: 'Load a local file into current workspace',
         icon: 'fa fa-upload',
+        placement: 'top'
+      },
+      {
+        action: 'uploadFolder',
+        title: 'Load a local folder into current workspace',
+        icon: 'fa fa-arrow-circle-up',
         placement: 'right'
       },
       {
@@ -41,6 +47,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
     ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
     actions: {}
   })
+  const enableDirUpload = { directory: "", webkitdirectory: "" }
 
   useEffect(() => {
     const actions = {
@@ -67,7 +74,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
           if (action === 'uploadFile') {
             return (
               <CustomTooltip
-                placement="right"
+                placement={placement as Placement}
                 tooltipId="uploadFileTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
@@ -88,6 +95,30 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 </label>
               </CustomTooltip>
             )
+          } else if (action === 'uploadFolder') {
+            return (
+              <CustomTooltip
+                placement={placement as Placement}
+                tooltipId="uploadFolderTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
+                key={`index-${action}-${placement}-${icon}`}
+              >
+                <label
+                  id={action}
+                  data-id={'fileExplorerUploadFolder' + action }
+                  className={icon + ' mb-0 remixui_newFile'}
+                  key={`index-${action}-${placement}-${icon}`}
+                >
+                    <input id="folderUpload" data-id="fileExplorerFolderUpload" type="file" onChange={(e) => {
+                      e.stopPropagation()
+                      props.uploadFolder(e.target)
+                      e.target.value = null
+                    }}
+                    {...enableDirUpload} multiple />
+                </label>
+              </CustomTooltip>
+            )
           } else {
             return (
               <CustomTooltip

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

@@ -190,6 +190,14 @@ export const FileExplorer = (props: FileExplorerProps) => {
     props.dispatchUploadFile(target, parentFolder)
   }
 
+  const uploadFolder = (target) => {
+    const parentFolder = getFocusedFolder()
+    const expandPath = [...new Set([...props.expandPath, parentFolder])]
+
+    props.dispatchHandleExpandPath(expandPath)
+    props.dispatchUploadFolder(target, parentFolder)
+  }
+
   const copyFile = (src: string, dest: string) => {
     try {
       props.dispatchCopyFile(src, dest)
@@ -459,6 +467,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 createNewFolder={handleNewFolderInput}
                 publishToGist={publishToGist}
                 uploadFile={uploadFile}
+                uploadFolder={uploadFolder}
               />
             </div>
           }

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

@@ -18,6 +18,7 @@ export const FileSystemContext = createContext<{
   dispatchDeleteAllWorkspaces: () => Promise<void>,
   dispatchPublishToGist: (path?: string, type?: string) => Promise<void>,
   dispatchUploadFile: (target?: SyntheticEvent, targetFolder?: string) => Promise<void>,
+  dispatchUploadFolder: (target?: SyntheticEvent, targetFolder?: string) => Promise<void>,
   dispatchCreateNewFile: (path: string, rootDir: string) => Promise<void>,
   dispatchSetFocusElement: (elements: { key: string, type: 'file' | 'folder' | 'gist' }[]) => Promise<void>,
   dispatchCreateNewFolder: (path: string, rootDir: string) => Promise<void>,

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

@@ -7,7 +7,7 @@ import { FileSystemContext } from '../contexts'
 import { browserReducer, browserInitialState } from '../reducers/workspace'
 import { initWorkspace, fetchDirectory, removeInputField, deleteWorkspace, deleteAllWorkspaces, clearPopUp, publishToGist, createNewFile, setFocusElement, createNewFolder,
   deletePath, renamePath, downloadPath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace,
-  fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder,
+  fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile, uploadFolder, handleDownloadFiles, restoreBackupZip, cloneRepository, moveFile, moveFolder,
   showAllBranches, switchBranch, createNewBranch, checkoutRemoteBranch, createSolidityGithubAction, createTsSolGithubAction, createSlitherGithubAction
 } from '../actions'
 import { Modal, WorkspaceProps, WorkspaceTemplate } from '../types'
@@ -79,6 +79,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await uploadFile(target, targetFolder)
   }
 
+  const dispatchUploadFolder = async (target?: SyntheticEvent, targetFolder?: string) => {
+    await uploadFolder(target, targetFolder)
+  }
+
   const dispatchCreateNewFile = async (path: string, rootDir: string) => {
     await createNewFile(path, rootDir)
   }
@@ -265,6 +269,7 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchDeleteAllWorkspaces,
     dispatchPublishToGist,
     dispatchUploadFile,
+    dispatchUploadFolder,
     dispatchCreateNewFile,
     dispatchSetFocusElement,
     dispatchCreateNewFolder,

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

@@ -528,7 +528,7 @@ export function Workspace () {
               <div className='h-100 remixui_treeview' data-id='filePanelFileExplorerTree'>
                 <FileExplorer
                   name={currentWorkspace}
-                  menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '']}
+                  menuItems={['createNewFile', 'createNewFolder', 'publishToGist', canUpload ? 'uploadFile' : '', canUpload ? 'uploadFolder' : '']}
                   contextMenuItems={global.fs.browser.contextMenu.registeredMenuItems}
                   removedContextMenuItems={global.fs.browser.contextMenu.removedMenuItems}
                   files={global.fs.browser.files}
@@ -547,6 +547,7 @@ export function Workspace () {
                   dispatchRenamePath={global.dispatchRenamePath}
                   dispatchDownloadPath={global.dispatchDownloadPath}
                   dispatchUploadFile={global.dispatchUploadFile}
+                  dispatchUploadFolder={global.dispatchUploadFolder}
                   dispatchCopyFile={global.dispatchCopyFile}
                   dispatchCopyFolder={global.dispatchCopyFolder}
                   dispatchPublishToGist={global.dispatchPublishToGist}
@@ -587,6 +588,7 @@ export function Workspace () {
                   dispatchRenamePath={global.dispatchRenamePath}
                   dispatchDownloadPath={global.dispatchDownloadPath}
                   dispatchUploadFile={global.dispatchUploadFile}
+                  dispatchUploadFolder={global.dispatchUploadFolder}
                   dispatchCopyFile={global.dispatchCopyFile}
                   dispatchCopyFolder={global.dispatchCopyFolder}
                   dispatchPublishToGist={global.dispatchPublishToGist}

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

@@ -98,6 +98,7 @@ export interface FileExplorerProps {
     dispatchRenamePath: (oldPath: string, newPath: string) => Promise<void>,
     dispatchDownloadPath: (path: string) => Promise<void>,
     dispatchUploadFile: (target?: React.SyntheticEvent, targetFolder?: string) => Promise<void>,
+    dispatchUploadFolder: (target?: React.SyntheticEvent, targetFolder?: string) => Promise<void>,
     dispatchCopyFile: (src: string, dest: string) => Promise<void>,
     dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
     dispatchRunScript: (path: string) => Promise<void>,
@@ -120,6 +121,7 @@ export interface FileExplorerMenuProps {
     createNewFolder: (parentFolder?: string) => void,
     publishToGist: (path?: string) => void,
     uploadFile: (target: EventTarget & HTMLInputElement) => void
+    uploadFolder: (target: EventTarget & HTMLInputElement) => void
     tooltipPlacement?: Placement
 }
 export interface FileExplorerContextMenuProps {