feat: Allow users to add uploaded files to project (codesandbox#730)

wuweiweiwu · CompuIves · commit 71cfe59a8df5 · 2018-04-23T16:38:41.000+03:00
* added AddFileToSandbox option in uploads management

* allow DirectoryEntry to upload file inside self

* removed unnecessary state clear
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js
@@ -111,6 +111,7 @@ class DirectoryEntry extends React.Component {
         this.props.signals.files.fileUploaded({
           content: base64Image,
           name: file.name,
+          directoryShortid: this.props.shortid,
         });
       });
     };
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import AddIcon from 'react-icons/lib/md/add';
+import Tooltip from 'common/components/Tooltip';
+
+export const AddFileToSandboxButton = styled(props => (
+  <Tooltip title="Add File to Sandbox">
+    <button {...props}>
+      <AddIcon />
+    </button>
+  </Tooltip>
+))`
+  font-size: 1.2em;
+  background-color: inherit;
+  border: none;
+  padding: 5px 6px 9px 6px;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+  }
+  &[disabled] {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { AddFileToSandboxButton } from './elements';
+
+export default class AddFileToSandboxButtonContainer extends React.PureComponent {
+  addFileToSandbox = () => {
+    const { onAddFileToSandbox, url, name } = this.props;
+    onAddFileToSandbox({ url, name });
+  };
+
+  render() {
+    return <AddFileToSandboxButton onClick={this.addFileToSandbox} />;
+  }
+}
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js
@@ -3,9 +3,10 @@ import moment from 'moment';
 import { sortBy } from 'lodash';
 import filesize from 'filesize';
 import DeleteFileButton from '../DeleteFileButton';
+import AddFileToSandboxButton from '../AddFileToSandboxButton';
 import { HeaderTitle, Table, StatBody, Body, FileRow } from './elements';
 
-function FilesList({ files, deleteFile }) {
+function FilesList({ files, deleteFile, addFileToSandbox }) {
   return (
     <Table>
       <thead>
@@ -14,6 +15,7 @@ function FilesList({ files, deleteFile }) {
           <HeaderTitle>Created</HeaderTitle>
           <HeaderTitle>Size</HeaderTitle>
           <HeaderTitle />
+          <HeaderTitle />
         </tr>
       </thead>
       <Body>
@@ -26,6 +28,13 @@ function FilesList({ files, deleteFile }) {
             </td>
             <td>{moment(f.insertedAt).format('ll')}</td>
             <td>{filesize(f.objectSize)}</td>
+            <StatBody style={{ padding: '0.55rem 0.5rem', cursor: 'pointer' }}>
+              <AddFileToSandboxButton
+                url={f.url}
+                name={f.name}
+                onAddFileToSandbox={addFileToSandbox}
+              />
+            </StatBody>
             <StatBody style={{ padding: '0.55rem 0.5rem', cursor: 'pointer' }}>
               <DeleteFileButton id={f.id} onDelete={deleteFile} />
             </StatBody>
diff --git a/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.js b/packages/app/src/app/pages/common/Modals/StorageManagementModal/index.js
@@ -39,6 +39,7 @@ class StorageManagementModal extends React.Component {
             <FilesList
               files={store.uploadedFiles}
               deleteFile={signals.files.deletedUploadedFile}
+              addFileToSandbox={signals.files.addedFileToSandbox}
             />
           )}
         {isEmpty && (
diff --git a/packages/app/src/app/store/modules/files/index.js b/packages/app/src/app/store/modules/files/index.js
@@ -5,6 +5,7 @@ export default Module({
   model: {},
   state: {},
   signals: {
+    addedFileToSandbox: sequences.addFileToSandbox,
     gotUploadedFiles: sequences.getUploadedFiles,
     deletedUploadedFile: sequences.deleteUploadedFile,
     fileUploaded: sequences.uploadFile,
diff --git a/packages/app/src/app/store/modules/files/sequences.js b/packages/app/src/app/store/modules/files/sequences.js
@@ -61,6 +61,14 @@ export const createModule = [
   },
 ];
 
+export const addFileToSandbox = [
+  set(props`newCode`, props`url`),
+  set(props`title`, props`name`),
+  set(props`isBinary`, true),
+  closeModal,
+  createModule,
+];
+
 export const uploadFile = [
   set(props`modal`, 'uploading'),
   setModal,
