Merge pull request #790 from ethereum/master-fix-home-tab

Fix create and upload file in home tab

apps/remix-ide/src/app/panels/file-panel.js

@@ -34,7 +34,7 @@ var canUpload = window.File || window.FileReader || window.FileList || window.Bl
 const profile = {
   name: 'fileExplorers',
   displayName: 'File explorers',
-  methods: [],
+  methods: ['createNewFile', 'uploadFile'],
   events: [],
   icon: 'assets/img/fileManager.webp',
   description: ' - ',
@@ -67,6 +67,8 @@ module.exports = class Filepanel extends ViewPlugin {
     }
     this.reset = false
     this.registeredMenuItems = []
+    this.displayNewFile = false
+    this.uploadFileEvent = null
     this.el = yo`
       <div id="fileExplorerView">
       </div>
@@ -99,6 +101,26 @@ module.exports = class Filepanel extends ViewPlugin {
     this.renderComponent()
   }
 
+  createNewFile () {
+    this.displayNewFile = true
+    this.renderComponent()
+  }
+
+  resetNewFile () {
+    this.displayNewFile = false
+    this.renderComponent()
+  }
+
+  uploadFile (target) {
+    this.uploadFileEvent = target
+    this.renderComponent()
+  }
+
+  resetUploadFile () {
+    this.uploadFileEvent = null
+    this.renderComponent()
+  }
+
   render () {
     return this.el
   }
@@ -132,6 +154,8 @@ module.exports = class Filepanel extends ViewPlugin {
                   plugin={this}
                   focusRoot={this.reset}
                   contextMenuItems={this.registeredMenuItems}
+                  displayInput={this.displayNewFile}
+                  externalUploads={this.uploadFileEvent}
                 />
               </div>
               <div className='pl-2 filesystemexplorer remixui_treeview'>

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -281,9 +281,13 @@ export class LandingPage extends ViewPlugin {
     }
 
     const createNewFile = () => {
-      const fileExplorer = globalRegistry.get('fileexplorer/browser').api
+      this.call('fileExplorers', 'createNewFile')
-      fileExplorer.createNewFile()
     }
+
+    const uploadFile = (target) => {
+      this.call('fileExplorers', 'uploadFile', target)
+    }
+
     const connectToLocalhost = () => {
       this.appManager.activatePlugin('remixd')
     }
@@ -382,8 +386,7 @@ export class LandingPage extends ViewPlugin {
                           <input title="open file" type="file" onchange="${
                             (event) => {
                               event.stopPropagation()
-                              const fileExplorer = globalRegistry.get('fileexplorer/browser').api
+                              uploadFile(event.target)
-                              fileExplorer.uploadFile(event)
                             }
                           }" multiple />
                         </label>

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

@@ -60,6 +60,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
                   e.stopPropagation()
                   props.uploadFile(e.target)
+                  e.target.value = null
                 }}
                 multiple />
               </label>

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

@@ -16,7 +16,7 @@ import './css/file-explorer.css'
 const queryParams = new QueryParams()
 
 export const FileExplorer = (props: FileExplorerProps) => {
-  const { filesProvider, name, registry, plugin, focusRoot, contextMenuItems } = props
+  const { filesProvider, name, registry, plugin, focusRoot, contextMenuItems, displayInput, externalUploads } = props
   const [state, setState] = useState({
     focusElement: [{
       key: name,
@@ -182,6 +182,20 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }, [contextMenuItems])
 
+  useEffect(() => {
+    if (displayInput) {
+      handleNewFileInput()
+      plugin.resetNewFile()
+    }
+  }, [displayInput])
+
+  useEffect(() => {
+    if (externalUploads) {
+      uploadFile(externalUploads)
+      plugin.resetUploadFile()
+    }
+  }, [externalUploads])
+
   const resolveDirectory = async (folderPath, dir: File[], isChild = false): Promise<File[]> => {
     if (!isChild && (state.focusEdit.element === 'browser/blank') && state.focusEdit.isNew && (dir.findIndex(({ path }) => path === 'browser/blank') === -1)) {
       dir = state.focusEdit.type === 'file' ? [...dir, {
@@ -454,8 +468,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
     // pick that up via the 'fileAdded' event from the files module.
 
     [...target.files].forEach((file) => {
-      const files = filesProvider
-
       const loadFile = (name: string): void => {
         const fileReader = new FileReader()
 
@@ -467,7 +479,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
             }, null)
             return
           }
-          const success = await files.set(name, event.target.result)
+          const success = await filesProvider.set(name, event.target.result)
 
           if (!success) {
             modal('File Upload Failed', 'Failed to create file ' + name, {
@@ -478,9 +490,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
         }
         fileReader.readAsText(file)
       }
-      const name = files.type + '/' + file.name
+      const name = filesProvider.type + '/' + file.name
 
-      files.exists(name, (error, exist) => {
+      filesProvider.exists(name, (error, exist) => {
         if (error) console.log(error)
         if (!exist) {
           loadFile(name)

libs/remix-ui/file-explorer/src/lib/types/index.ts

@@ -6,7 +6,9 @@ export interface FileExplorerProps {
     menuItems?: string[],
     plugin: any,
     focusRoot: boolean,
-    contextMenuItems: { name: string, type: string[], path: string[], extension: string[], pattern: string[] }[]
+    contextMenuItems: { name: string, type: string[], path: string[], extension: string[], pattern: string[] }[],
+    displayInput?: boolean,
+    externalUploads?: EventTarget & HTMLInputElement
 }
 
 export interface File {