Accept folders in upload files button

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.tsx

@@ -2,6 +2,7 @@ import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
 import {
   getChildren as calculateChildren,
   inDirectory,
+  getFiles,
 } from '@codesandbox/common/lib/sandbox/modules';
 import { Directory, Module } from '@codesandbox/common/lib/types';
 import { useOvermind } from 'app/overmind';
@@ -15,34 +16,6 @@ import { EntryContainer, Opener, Overlay } from './elements';
 import Entry from './Entry';
 import validateTitle from './validateTitle';
 
-const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
-  new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      resolve(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  });
-
-type parsedFiles = { [k: string]: { dataURI: string; type: string } };
-const getFiles = async (files: File[] | FileList): Promise<parsedFiles> => {
-  const returnedFiles = {};
-  await Promise.all(
-    Array.from(files)
-      .filter(Boolean)
-      .map(async file => {
-        const dataURI = await readDataURL(file);
-        // @ts-ignore
-        returnedFiles[file.path || file.name] = {
-          dataURI,
-          type: file.type,
-        };
-      })
-  );
-
-  return returnedFiles;
-};
-
 type ItemTypes = 'module' | 'directory';
 
 type Modal = {
@@ -222,6 +195,7 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
     const fileSelector = document.createElement('input');
     fileSelector.setAttribute('type', 'file');
     fileSelector.setAttribute('multiple', 'true');
+    fileSelector.setAttribute('webkitdirectory', '');
     fileSelector.onchange = async event => {
       const target = event.target as HTMLInputElement;
       const files = await getFiles(target.files);

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Files/DirectoryEntry/index.tsx

@@ -1,48 +1,21 @@
+import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
 import {
   getChildren as calculateChildren,
   inDirectory,
+  getFiles,
 } from '@codesandbox/common/lib/sandbox/modules';
 import { Directory, Module } from '@codesandbox/common/lib/types';
 import { useOvermind } from 'app/overmind';
 import React from 'react';
 import { DropTarget, DropTargetMonitor } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
-import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
 
 import DirectoryChildren from './DirectoryChildren';
 import DirectoryEntryModal from './DirectoryEntryModal';
 import { EntryContainer, Opener, Overlay } from './elements';
 import Entry from './Entry';
 import validateTitle from './validateTitle';
 
-const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
-  new Promise(resolve => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      resolve(e.target.result);
-    };
-    reader.readAsDataURL(file);
-  });
-
-type parsedFiles = { [k: string]: { dataURI: string; type: string } };
-const getFiles = async (files: File[] | FileList): Promise<parsedFiles> => {
-  const returnedFiles = {};
-  await Promise.all(
-    Array.from(files)
-      .filter(Boolean)
-      .map(async file => {
-        const dataURI = await readDataURL(file);
-        // @ts-ignore
-        returnedFiles[file.path || file.name] = {
-          dataURI,
-          type: file.type,
-        };
-      })
-  );
-
-  return returnedFiles;
-};
-
 type ItemTypes = 'module' | 'directory';
 
 type Modal = {
@@ -241,6 +214,7 @@ const DirectoryEntry: React.FunctionComponent<Props> = ({
     const fileSelector = document.createElement('input');
     fileSelector.setAttribute('type', 'file');
     fileSelector.setAttribute('multiple', 'true');
+    fileSelector.setAttribute('webkitdirectory', '');
     fileSelector.onchange = async event => {
       const target = event.target as HTMLInputElement;
       const files = await getFiles(target.files);

packages/common/src/sandbox/modules.ts

@@ -377,3 +377,33 @@ export const inDirectory = memoize(
   },
   inDirectoryMemoize
 );
+
+const readDataURL = (file: File): Promise<string | ArrayBuffer> =>
+  new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = e => {
+      resolve(e.target.result);
+    };
+    reader.readAsDataURL(file);
+  });
+
+type parsedFiles = { [k: string]: { dataURI: string; type: string } };
+export const getFiles = async (
+  files: File[] | FileList
+): Promise<parsedFiles> => {
+  const returnedFiles = {};
+  await Promise.all(
+    Array.from(files)
+      .filter(Boolean)
+      .map(async file => {
+        const dataURI = await readDataURL(file);
+        // @ts-ignore
+        returnedFiles[file.path || file.webkitRelativePath || file.name] = {
+          dataURI,
+          type: file.type,
+        };
+      })
+  );
+
+  return returnedFiles;
+};