feat(explorer): Add support for uploading files

src/js/apps/Explorer/Explorer.scss

@@ -2,6 +2,8 @@
     display: flex;
     // justify-content: space-evenly;
     flex-flow: wrap;
+    height: 100%;
+    outline: none;
 }
 
 .toolbarButton {

src/js/apps/Explorer/Explorer.tsx

@@ -16,7 +16,7 @@ import WasmFs from "@wasmer/wasmfs";
 import Folder from './components/Folder';
 import File from './components/File';
 import Dirent from 'memfs/lib/Dirent';
-import { useDropzone } from 'react-dropzone'
+import Dropzone from '../../components/molecules/Dropzone';
 const styles = require('./Explorer.scss');
 
 export default function Explorer() {
@@ -93,15 +93,15 @@ export default function Explorer() {
                     </Collapse>
                 </List>
             }>
-                <div className={styles.files}>
+                <Dropzone currentPath={path} className={styles.files}>
                     {files.map((file) => {
                         if (file.isDirectory()) {
                             return <Folder key={file.name.toString()} folder={file} onClick={handleFileClick} />
                         } else if (file.isFile()) {
                             return <File key={file.name.toString()} file={file} onClick={handleFileClick} />
                         }
                     })}
-                </div>
+                </Dropzone>
             </AppHeader>
         </>
     );

src/js/apps/Explorer/components/File/File.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     align-items: center;
     width: 25%;
+    height: 200px;
 }
 
 .iconWrapper {

src/js/apps/Explorer/components/Folder/Folder.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     align-items: center;
     width: 25%;
+    height: 200px;
 }
 
 .icon {

src/js/components/molecules/Dropzone/Dropzone.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useDropzone } from 'react-dropzone';
+import WasmFs from "@wasmer/wasmfs";
+import InstanceBag from '../../../InstanceBag';
+import { readFileAsArrayBuffer } from '../../../services/FileReaderService';
+
+interface Props {
+    className?: string;
+    currentPath: string;
+    children: React.ReactNode;
+}
+
+export default function Dropzone(props: Props) {
+    const onDrop = React.useCallback(async (acceptedFiles: File[]) => {
+        const wasmFs = InstanceBag.get<WasmFs>('fs');
+        const promises = acceptedFiles.map(file => readFileAsArrayBuffer(file));
+        const processedFiles = await Promise.all(promises);
+
+        processedFiles.forEach((file) => {
+            const path = `${props.currentPath}/${file.name}`;
+            wasmFs.fs.writeFileSync(path, new Uint8Array(file.bin));
+        });
+    }, [props.currentPath]);
+
+    const { getInputProps, getRootProps, isDragActive } = useDropzone({ onDrop, noClick: true });
+
+    return (
+        <div className={props.className} {...getRootProps()}>
+            <input {...getInputProps()} />
+            {props.children}
+        </div>
+    );
+}

src/js/components/molecules/Dropzone/index.ts

@@ -0,0 +1 @@
+export { default } from './Dropzone';

src/js/services/FileReaderService.ts

@@ -0,0 +1,25 @@
+interface ProcessedFile {
+    name: string;
+    size: number;
+    bin: ArrayBuffer;
+}
+
+export function readFileAsArrayBuffer(file: File): Promise<ProcessedFile> {
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+
+        fileReader.onerror = (error) => {
+            reject(error);
+        }
+
+        fileReader.onload = () => {
+            resolve({
+                name: file.name,
+                size: file.size,
+                bin: <ArrayBuffer>fileReader.result,
+            });
+        }
+
+        fileReader.readAsArrayBuffer(file);
+    });
+}