chore: unzip

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

@@ -3,7 +3,8 @@ import { bufferToHex, keccakFromString } from 'ethereumjs-util'
 import axios, { AxiosResponse } from 'axios'
 import { addInputFieldSuccess, createWorkspaceError, createWorkspaceRequest, createWorkspaceSuccess, displayNotification, fetchWorkspaceDirectoryError, fetchWorkspaceDirectoryRequest, fetchWorkspaceDirectorySuccess, hideNotification, setCurrentWorkspace, setDeleteWorkspace, setMode, setReadOnlyMode, setRenameWorkspace } from './payload'
 import { checkSlash, checkSpecialChars } from '@remix-ui/helper'
-
+import JSZip from 'jszip'
+const zip = new JSZip();
 const examples = require('../../../../../../apps/remix-ide/src/app/editor/examples')
 const QueryParams = require('../../../../../../apps/remix-ide/src/lib/query-params')
 const LOCALHOST = ' - connect to localhost - '
@@ -228,51 +229,113 @@ export const switchToWorkspace = async (name: string) => {
     dispatch(setReadOnlyMode(false))
   }
 }
+export async function getMimeTypeOfFile(file) {
+  const getMimeType = (signature) => {
+    switch (signature) {
+      case '89504E47':
+        return 'image/png'
+      case '47494638':
+        return 'image/gif'
+      case '25504446':
+        return 'application/pdf'
+      case 'FFD8FFDB':
+      case 'FFD8FFE0':
+      case 'FFD8FFE1':
+        return 'image/jpeg'
+      case '504B0304':
+        return 'application/zip'
+      default:
+        return 'Unknown filetype'
+    }
+  }
+
+  return await new Promise((resolve) => {
+    let fileReader = new FileReader();
+
+    fileReader.onloadend = function (evt) {
+      if (evt.target.readyState === FileReader.DONE) {
+        const uint = new Uint8Array(evt.target.result as any);
+        let bytes = [];
+
+        uint.forEach((byte) => {
+          bytes.push(byte.toString(16))
+        })
+
+        const hex = bytes.join('').toUpperCase();
+        const mimeType = getMimeType(hex);
+
+        resolve(mimeType);
+      }
+    }
+
+    fileReader.readAsArrayBuffer(file.slice(0, 4));
+  });
+}
+
 
 export const uploadFile = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void, isFolder=false) => {
   // TODO The file explorer is merely a view on the current state of
   // the files module. Please ask the user here if they want to overwrite
   // a file and then just use `files.add`. The file explorer will
   // pick that up via the 'fileAdded' event from the files module.
-  [...target.files].forEach((file) => {
-    const workspaceProvider = plugin.fileProviders.workspace
-    const loadFile = (name: string): void => {
-      const fileReader = new FileReader()
-
-      fileReader.onload = async function (event) {
-        if (checkSpecialChars(file.name)) {
-          return dispatch(displayNotification('File Upload Failed', 'Special characters are not allowed', 'Close', null, async () => {}))
+  async function iterator (files) {
+    await Promise.all(Array.from(files).map(async (file: File)=> {
+      if (
+        file.type === 'application/zip'
+      ) {
+        const unzipData = await zip.loadAsync(file)
+        const arr = []
+        for (let zobj of Object.values(unzipData.files)) {
+          if (zobj.dir) continue;
+          const zblob = await zobj.async("blob");
+          const mimeType = await getMimeTypeOfFile(zblob);
+          const zfile = new File([zblob], zobj.name, { type: mimeType as string });
+          arr.push(zfile)
         }
-        const success = await workspaceProvider.set(name, event.target.result)
+        return  await iterator(arr)
+      }
+      const workspaceProvider = plugin.fileProviders.workspace
+      const loadFile = (name: string): void => {
+        const fileReader = new FileReader()
+        fileReader.onload = async function (event) {
+          if (checkSpecialChars(file.name)) {
+            return dispatch(displayNotification('File Upload Failed', 'Special characters are not allowed', 'Close', null, async () => {
+            }))
+          }
+          const success = await workspaceProvider.set(name, event.target.result)
 
-        if (!success) {
-          return dispatch(displayNotification('File Upload Failed', 'Failed to create file ' + name, 'Close', null, async () => {}))
-        }
-        const config = plugin.registry.get('config').api
-        const editor = plugin.registry.get('editor').api
+          if (!success) {
+            return dispatch(displayNotification('File Upload Failed', 'Failed to create file ' + name, 'Close', null, async () => {
+            }))
+          }
+          const config = plugin.registry.get('config').api
+          const editor = plugin.registry.get('editor').api
 
-        if ((config.get('currentFile') === name) && (editor.currentContent() !== event.target.result)) {
-          editor.setText(event.target.result)
+          if ((config.get('currentFile') === name) && (editor.currentContent() !== event.target.result)) {
+            editor.setText(event.target.result)
+          }
         }
+        fileReader.readAsText(file)
+        cb && cb(null, true)
       }
-      fileReader.readAsText(file)
-      cb && cb(null, true)
-    }
-    const name = `${targetFolder}/${isFolder? file.webkitRelativePath : file.name}`
+      const name = `${targetFolder}/${isFolder ? file.webkitRelativePath : file.name}`
 
-    workspaceProvider.exists(name).then(exist => {
-      if (!exist) {
-        loadFile(name)
-      } else {
-        dispatch(displayNotification('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, 'OK', null, () => {
+      workspaceProvider.exists(name).then(exist => {
+        if (!exist) {
           loadFile(name)
-        }, () => {}))
-      }
-    }).catch(error => {
-      cb && cb(error)
-      if (error) console.log(error)
-    })
-  })
+        } else {
+          dispatch(displayNotification('Confirm overwrite', `The file ${name} already exists! Would you like to overwrite it?`, 'OK', null, () => {
+            loadFile(name)
+          }, () => {
+          }))
+        }
+      }).catch(error => {
+        cb && cb(error)
+        if (error) console.log(error)
+      })
+    }))
+  }
+  iterator(target.files)
 }
 
 export const uploadFolder = async (target, targetFolder: string, cb?: (err: Error, result?: string | number | boolean | Record<string, any>) => void) => {