Drag and Drop (codesandbox#755)

* Make files plural

* Multi create modules

* multifile uploading

* Drag n drop functionality

* Change progress message

* Fix lint

* Live integration for mass module creation

* Add changelog info

* Docs pages

Author: CompuIves

packages/app/package.json

@@ -119,7 +119,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.18",
-    "codesandbox-import-utils": "^1.2.7",
+    "codesandbox-import-utils": "1.2.10",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "console-feed": "^2.7.3",
@@ -186,6 +186,7 @@
     "react-stripe-elements": "^1.2.0",
     "react-tagsinput": "^3.19.0",
     "shelljs": "^0.7.8",
+    "shortid": "^2.2.8",
     "store": "^2.0.12",
     "string-replace-loader": "^1.3.0",
     "styled-components": "^3.2.1",

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -236,7 +236,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     await this.initializeModules(sandbox.modules);
     await this.openNewModel(currentModule.id, currentModule.title);
 
-    this.addKeyCommands();
     import(/* webpackChunkName: 'monaco-emmet' */ './enable-emmet').then(
       enableEmmet => {
         enableEmmet.default(editor, monaco, {});
@@ -1274,16 +1273,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   };
 
-  addKeyCommands = () => {
-    // Disabled, we now let keybinding manager handle this
-    // this.editor.addCommand(
-    //   this.monaco.KeyMod.CtrlCmd | this.monaco.KeyCode.KEY_S, // eslint-disable-line no-bitwise
-    //   () => {
-    //     this.handleSaveCode();
-    //   }
-    // );
-  };
-
   disposeModules = (modules: Array<Module>) => {
     if (this.editor) {
       this.editor.setModel(null);
@@ -1350,31 +1339,34 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   ) => {
     // Remove the first slash, as this will otherwise create errors in monaco
     const path = getModulePath(modules, directories, module.id);
+    if (path) {
+      // We need to add this as a lib specifically to Monaco, because Monaco
+      // tends to lose type definitions if you don't touch a file for a while.
+      // Related issue: https://github.com/Microsoft/monaco-editor/issues/461
+      const lib = this.addLib(module.code || '', path);
+
+      const mode = await this.getMode(module.title);
+
+      const model = this.monaco.editor.createModel(
+        module.code || '',
+        mode === 'javascript' ? 'typescript' : mode,
+        new this.monaco.Uri().with({ path, scheme: 'file' })
+      );
 
-    // We need to add this as a lib specifically to Monaco, because Monaco
-    // tends to lose type definitions if you don't touch a file for a while.
-    // Related issue: https://github.com/Microsoft/monaco-editor/issues/461
-    const lib = this.addLib(module.code || '', path);
-
-    const mode = await this.getMode(module.title);
+      model.updateOptions({ tabSize: this.props.settings.tabWidth });
 
-    const model = this.monaco.editor.createModel(
-      module.code || '',
-      mode === 'javascript' ? 'typescript' : mode,
-      new this.monaco.Uri().with({ path, scheme: 'file' })
-    );
-
-    model.updateOptions({ tabSize: this.props.settings.tabWidth });
+      modelCache[module.id] = modelCache[module.id] || {
+        model: null,
+        decorations: [],
+        cursorPos: null,
+      };
+      modelCache[module.id].model = model;
+      modelCache[module.id].lib = lib;
 
-    modelCache[module.id] = modelCache[module.id] || {
-      model: null,
-      decorations: [],
-      cursorPos: null,
-    };
-    modelCache[module.id].model = model;
-    modelCache[module.id].lib = lib;
+      return model;
+    }
 
-    return model;
+    return undefined;
   };
 
   getModelById = async (id: string) => {

packages/app/src/app/pages/Live/index.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 
 import Navigation from 'app/pages/common/Navigation';
 import Fullscreen from 'common/components/flex/Fullscreen';
@@ -15,6 +14,7 @@ import Skeleton from 'app/components/Skeleton';
 import Padding from 'common/components/spacing/Padding';
 import SignInButton from 'app/pages/common/SignInButton';
 
+import HTML5Backend from '../common/HTML5BackendWithFolderSupport';
 import Editor from '../Sandbox/Editor';
 import BlinkingDot from './BlinkingDot';
 

packages/app/src/app/pages/Patron/PricingModal/PricingInfo/index.js

@@ -26,10 +26,9 @@ function PricingInfo() {
           <Feature feature="Private Sandboxes" free="No" supporter="Yes" />
           <Feature feature="Sandbox Limit" free="50" supporter="Unlimited" />
           <Feature
-            disabled
             feature="Static File Hosting"
-            free="10Mb"
-            supporter="1Gb"
+            free="20Mb"
+            supporter="500Mb"
           />
         </tbody>
       </table>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js

@@ -46,7 +46,7 @@ function EditIcons({
             </Tooltip>
           )}
           {onUploadFile && (
-            <Tooltip title="Upload File">
+            <Tooltip title="Upload Files">
               <Icon onClick={handleClick(onUploadFile)}>
                 <UploadFileIcon />
               </Icon>

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

@@ -105,7 +105,7 @@ class Entry extends React.PureComponent {
         icon: AddDirectoryIcon,
       },
       onUploadFileClick && {
-        title: 'Upload File',
+        title: 'Upload Files',
         action: onUploadFileClick,
         icon: UploadFileIcon,
       },

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

@@ -4,12 +4,38 @@ import { DropTarget } from 'react-dnd';
 import { reaction } from 'mobx';
 import Modal from 'app/components/Modal';
 import Alert from 'app/components/Alert';
+import { NativeTypes } from 'react-dnd-html5-backend';
 
 import validateTitle from './validateTitle';
 import Entry from './Entry';
 import DirectoryChildren from './DirectoryChildren';
 import { EntryContainer, Overlay, Opener } from './elements';
 
+const readDataURL = imageFile =>
+  new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = e => {
+      resolve(e.target.result);
+    };
+    reader.readAsDataURL(imageFile);
+  });
+
+const getFiles = async files => {
+  const returnedFiles = {};
+  await Promise.all(
+    Array.from(files)
+      .filter(Boolean)
+      .map(async file => {
+        const dataURI = await readDataURL(file);
+        returnedFiles[file.path || file.name] = {
+          dataURI,
+          type: file.type,
+        };
+      })
+  );
+
+  return returnedFiles;
+};
 class DirectoryEntry extends React.Component {
   constructor(props) {
     super(props);
@@ -101,32 +127,19 @@ class DirectoryEntry extends React.Component {
   onUploadFileClick = () => {
     const fileSelector = document.createElement('input');
     fileSelector.setAttribute('type', 'file');
-    fileSelector.onchange = event => {
-      const file = event.target.files[0];
-      if (!file) {
-        return;
-      }
+    fileSelector.setAttribute('multiple', 'true');
+    fileSelector.onchange = async event => {
+      const files = await getFiles(event.target.files);
 
-      this.readImageFile(file, base64Image => {
-        this.props.signals.files.fileUploaded({
-          content: base64Image,
-          name: file.name,
-          directoryShortid: this.props.shortid,
-        });
+      this.props.signals.files.filesUploaded({
+        files,
+        directoryShortid: this.props.shortid,
       });
     };
 
     fileSelector.click();
   };
 
-  readImageFile = (imageFile, callback) => {
-    const reader = new FileReader();
-    reader.onload = e => {
-      callback(e.target.result);
-    };
-    reader.readAsDataURL(imageFile);
-  };
-
   renameDirectory = (directoryShortid, title) => {
     this.props.signals.files.directoryRenamed({ title, directoryShortid });
   };
@@ -325,8 +338,16 @@ const entryTarget = {
     if (!monitor.isOver({ shallow: true })) return;
 
     const sourceItem = monitor.getItem();
+    if (sourceItem.dirContent) {
+      sourceItem.dirContent.then(async droppedFiles => {
+        const files = await getFiles(droppedFiles);
 
-    if (sourceItem.directory) {
+        props.signals.files.filesUploaded({
+          files,
+          directoryShortid: props.shortid,
+        });
+      });
+    } else if (sourceItem.directory) {
       props.signals.files.directoryMovedToDirectory({
         shortid: sourceItem.shortid,
         directoryShortid: props.shortid,
@@ -362,5 +383,7 @@ function collectTarget(connectMonitor, monitor) {
 }
 
 export default inject('signals', 'store')(
-  DropTarget('ENTRY', entryTarget, collectTarget)(observer(DirectoryEntry))
+  DropTarget(['ENTRY', NativeTypes.FILE], entryTarget, collectTarget)(
+    observer(DirectoryEntry)
+  )
 );

packages/app/src/app/pages/Sandbox/index.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import { DragDropContext } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import QuickActions from 'app/pages/Sandbox/QuickActions';
 
 import Navigation from 'app/pages/common/Navigation';
@@ -13,6 +12,7 @@ import Padding from 'common/components/spacing/Padding';
 import Skeleton from 'app/components/Skeleton';
 
 import Editor from './Editor';
+import HTML5Backend from '../common/HTML5BackendWithFolderSupport';
 
 class SandboxPage extends React.Component {
   componentWillMount() {

packages/app/src/app/pages/common/HTML5BackendWithFolderSupport/html-dir-content/file-list.js

@@ -0,0 +1,41 @@
+import { join } from 'path';
+import { getFileFromFileEntry, getListAsArray } from './utils';
+
+const getEntryData = (entry, options, level, path) => {
+  let promise;
+
+  if (entry.isDirectory) {
+    promise = options.recursive
+      ? getFileList(entry, options, level + 1, join(path, entry.name)) // eslint-disable-line
+      : Promise.resolve([]);
+  } else {
+    promise = getFileFromFileEntry(entry).then(file => {
+      if (file) {
+        // eslint-disable-next-line no-param-reassign
+        file.path = join(path, file.name);
+      }
+      return file ? [file] : [];
+    });
+  }
+
+  return promise;
+};
+
+/**
+ * returns a flat list of files for root dir item
+ * if recursive is true will get all files from sub folders
+ */
+const getFileList = (root, options, level = 0, path = root.name) =>
+  root && level < options.bail && root.isDirectory && root.createReader
+    ? new Promise(resolve => {
+        root.createReader().readEntries(
+          entries =>
+            Promise.all(
+              entries.map(entry => getEntryData(entry, options, level, path))
+            ).then(results => resolve(getListAsArray(results))), // flatten the results
+          () => resolve([])
+        ); // fail silently
+      })
+    : Promise.resolve([]);
+
+export default getFileList;

packages/app/src/app/pages/common/HTML5BackendWithFolderSupport/html-dir-content/index.js

@@ -0,0 +1,60 @@
+import getFileList from './file-list';
+import {
+  isItemFileEntry,
+  getListAsArray,
+  getAsEntry,
+  initOptions,
+} from './utils';
+
+/**
+ * returns a Promise<Array<File>> of File objects for the provided item if it represents a directory
+ * will attempt to retrieve all of its children files (optionally recursively)
+ * @param item: DataTransferItem
+ * @param options (optional)
+ *  {options.recursive} (default: false) - whether to recursively follow the dir structure
+ *  {options.bail} (default: 1000) - how many levels to follow recursively before bailing
+ */
+const getFiles = (item, options = {}) =>
+  getFileList(getAsEntry(item), initOptions(options));
+
+const getDataTransferItemFiles = (item, options) =>
+  getFiles(item, options).then(files => {
+    if (!files.length) {
+      // perhaps its a regular file
+      const file = item.getAsFile();
+      // eslint-disable-next-line
+      files = file ? [file] : files;
+    }
+
+    return files;
+  });
+
+/**
+ * returns a Promise<Array<File>> for the File objects found in the dataTransfer data of a drag&drop event
+ * In case a directory is found, will attempt to retrieve all of its children files (optionally recursively)
+ *
+ * @param evt: DragEvent - containing dataTransfer
+ * @param options (optional)
+ *  {options.recursive} (default: false) - whether to recursively follow the dir structure
+ *  {options.bail} (default: 1000) - how many levels to follow recursively before bailing
+ */
+const getFilesFromDragEvent = (evt, options = {}) => {
+  // eslint-disable-next-line
+  options = initOptions(options);
+
+  return new Promise(resolve => {
+    if (evt.dataTransfer.items) {
+      Promise.all(
+        getListAsArray(evt.dataTransfer.items)
+          .filter(item => isItemFileEntry(item))
+          .map(item => getDataTransferItemFiles(item, options))
+      ).then(files => resolve(getListAsArray(files)));
+    } else if (evt.dataTransfer.files) {
+      resolve(getListAsArray(evt.dataTransfer.files)); // turn into regular array (instead of FileList)
+    } else {
+      resolve([]);
+    }
+  });
+};
+
+export { getFiles, getFilesFromDragEvent };