feat: UPLOADING FILES (codesandbox#685)

* YAY UPLOADING FILES WORK

* Force CircleCI rebuild

* Upload progress modal

* Remove only image restriction

* Fix linting issues

* More specific errors for uploading failure.

* prelim modal

* Finished table

* update cerebral sequences and model

* state updates

* updating cerebral state tree for files

* pretty file management modal + loading animation

* Fix second argument of error

* Only show upload for signed in users

* Sort name of uploads and add to table

* Always open file in new tab

Author: wuweiweiwu

packages/app/src/app/components/UploadProgress/Cube/elements.js

@@ -0,0 +1,40 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotateAnimation = keyframes`
+  0% {
+    transform: rotateX(-37.5deg) rotateY(45deg);
+  }
+  100% {
+    transform: rotateX(-37.5deg) rotateY(405deg);
+  }
+`;
+
+export const Cube = styled.div`
+  position: absolute;
+  width: ${props => props.size + 1}px;
+  height: ${props => props.size + 1}px;
+
+  * {
+    position: absolute;
+    width: ${props => props.size + 1}px;
+    height: ${props => props.size + 1}px;
+  }
+`;
+
+export const Sides = styled.div`
+  ${({ noAnimation }) =>
+    !noAnimation && `animation: ${rotateAnimation} 1s linear infinite;`};
+  transform-style: preserve-3d;
+  transform: rotateX(-37.5deg) rotateY(45deg);
+
+  * {
+    box-sizing: border-box;
+    background-color: rgba(242, 119, 119, 0.5);
+    border: ${({ size }) => size / 10}px solid white;
+  }
+`;
+
+export const Side = styled.div`
+  transform-origin: 50% 50%;
+  transform: ${({ rotate }) => rotate} translateZ(${({ size }) => size / 2}px);
+`;

packages/app/src/app/components/UploadProgress/Cube/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Cube, Sides, Side } from './elements';
+
+function CubeComponent({ size = 150, noAnimation, className }) {
+  return (
+    <Cube className={className} size={size}>
+      <Sides noAnimation={noAnimation} size={size}>
+        <Side rotate="rotateX(90deg)" size={size} />
+        <Side rotate="rotateX(-90deg)" size={size} />
+        <Side rotate="rotateY(0deg)" size={size} />
+        <Side rotate="rotateY(-180deg)" size={size} />
+        <Side rotate="rotateY(-90deg)" size={size} />
+        <Side rotate="rotateY(90deg)" size={size} />
+      </Sides>
+    </Cube>
+  );
+}
+
+export default CubeComponent;

packages/app/src/app/components/UploadProgress/elements.js

@@ -0,0 +1,80 @@
+import styled, { keyframes } from 'styled-components';
+
+import delayInEffect from 'common/utils/animation/delay-effect';
+import OpaqueLogo from 'app/components/OpaqueLogo';
+import LocalLogo from 'react-icons/lib/md/laptop';
+import Cube from './Cube';
+
+export const Container = styled.div`
+  position: relative;
+  background-color: ${props => props.theme.background};
+
+  text-align: center;
+
+  font-size: 1.125rem;
+  padding: 1rem 2rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
+export const DeployAnimationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+
+  ${({ deploying }) => deploying && delayInEffect(0, false)};
+`;
+
+export const StyledLocalLogo = styled(LocalLogo)`
+  position: absolute;
+  font-size: 4rem;
+  transform: translateY(15px) translateX(-100px);
+  background-color: ${props => props.theme.background};
+  color: white;
+  z-index: 20;
+`;
+
+const cubeAnimation = keyframes`
+0% {
+  transform: translateY(20px) translateX(-100px) scale(0, 0);
+}
+
+20% {
+  transform: translateY(20px) translateX(-100px) scale(1, 1);
+}
+
+80% {
+  transform: translateY(20px) translateX(80px) scale(1, 1);
+}
+
+100% {
+  transform: translateY(20px) translateX(80px) scale(1, 1);
+}
+`;
+
+export const StyledCube = styled(Cube)`
+  position: absolute;
+  animation: ${cubeAnimation} 2s ease-in infinite;
+  animation-delay: ${({ i }) => i * 0.5}s;
+  transform: translateY(20px) translateX(-100px) scale(0, 0);
+`;
+
+export const StyledLogo = styled(OpaqueLogo)`
+  position: absolute;
+  z-index: 10;
+  transform: translateY(10px) translateX(80px);
+`;
+
+export const DeployText = styled.div`
+  ${delayInEffect()};
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+`;
+
+export const Result = styled.div`
+  ${delayInEffect(0.25)};
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+`;

packages/app/src/app/components/UploadProgress/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  Container,
+  DeployAnimationContainer,
+  StyledLocalLogo,
+  StyledCube,
+  StyledLogo,
+  DeployText,
+  Result,
+} from './elements';
+
+function Progress({ message, result }) {
+  return (
+    <Container>
+      {result ? (
+        <Result>{result}</Result>
+      ) : (
+        <div>
+          <DeployAnimationContainer deploying>
+            <StyledLocalLogo />
+            {[0, 1, 2, 3].map(i => <StyledCube key={i} i={i} size={20} />)}
+            <StyledLogo width={70} height={70} />
+          </DeployAnimationContainer>
+          <DeployText>{message}</DeployText>
+        </div>
+      )}
+    </Container>
+  );
+}
+
+export default Progress;

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

@@ -4,6 +4,7 @@ import CrossIcon from 'react-icons/lib/md/clear';
 import EditIcon from 'react-icons/lib/go/pencil';
 import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
 import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
+import UploadFileIcon from 'react-icons/lib/md/file-upload';
 
 import Tooltip from 'common/components/Tooltip';
 
@@ -24,6 +25,7 @@ function EditIcons({
   onCreateFile,
   onCreateDirectory,
   active,
+  onUploadFile,
   forceShow,
 }) {
   // Phones need double click if we show elements on click, that's why we only want
@@ -43,6 +45,13 @@ function EditIcons({
               </Icon>
             </Tooltip>
           )}
+          {onUploadFile && (
+            <Tooltip title="Upload File">
+              <Icon onClick={handleClick(onUploadFile)}>
+                <UploadFileIcon />
+              </Icon>
+            </Tooltip>
+          )}
           {onCreateFile && (
             <Tooltip title="New File">
               <Icon onClick={handleClick(onCreateFile)}>

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

@@ -6,6 +6,7 @@ import FileIcon from 'react-icons/lib/fa/file';
 import FolderIcon from 'react-icons/lib/fa/folder';
 import EditIcon from 'react-icons/lib/go/pencil';
 import DeleteIcon from 'react-icons/lib/go/trashcan';
+import UploadFileIcon from 'react-icons/lib/md/file-upload';
 
 import theme from 'common/theme';
 
@@ -79,6 +80,7 @@ class Entry extends React.PureComponent {
       connectDragSource, // eslint-disable-line
       onCreateModuleClick,
       onCreateDirectoryClick,
+      onUploadFileClick,
       deleteEntry,
       onClick,
       markTabsNotDirty,
@@ -102,6 +104,11 @@ class Entry extends React.PureComponent {
         action: onCreateDirectoryClick,
         icon: FolderIcon,
       },
+      onUploadFileClick && {
+        title: 'Upload File',
+        action: onUploadFileClick,
+        icon: UploadFileIcon,
+      },
       rename && {
         title: 'Rename',
         action: this.rename,
@@ -159,6 +166,7 @@ class Entry extends React.PureComponent {
                     hovering={hovering}
                     onCreateFile={onCreateModuleClick}
                     onCreateDirectory={onCreateDirectoryClick}
+                    onUploadFile={onUploadFileClick}
                     onDelete={deleteEntry && this.delete}
                     onEdit={rename && this.rename}
                     active={active}

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

@@ -112,6 +112,34 @@ class DirectoryEntry extends React.Component {
     this.resetState();
   };
 
+  onUploadFileClick = () => {
+    const fileSelector = document.createElement('input');
+    fileSelector.setAttribute('type', 'file');
+    fileSelector.onchange = event => {
+      const file = event.target.files[0];
+      if (!file) {
+        return;
+      }
+
+      this.readImageFile(file, base64Image => {
+        this.props.signals.files.fileUploaded({
+          content: base64Image,
+          name: file.name,
+        });
+      });
+    };
+
+    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 });
   };
@@ -202,6 +230,7 @@ class DirectoryEntry extends React.Component {
               rename={!root && this.renameDirectory}
               onCreateModuleClick={this.onCreateModuleClick}
               onCreateDirectoryClick={this.onCreateDirectoryClick}
+              onUploadFileClick={this.onUploadFileClick}
               deleteEntry={!root && this.deleteDirectory}
               hasChildren={this.getChildren().length > 0}
               closeTree={this.closeTree}

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

@@ -17,6 +17,11 @@ class Files extends React.Component {
     this.directory.onCreateDirectoryClick();
   };
 
+  uploadFile = () => {
+    // INCREDIBLY BAD PRACTICE! TODO: FIX THIS
+    this.directory.onUploadFileClick();
+  };
+
   render() {
     const store = this.props.store;
     const sandbox = store.editor.currentSandbox;
@@ -42,6 +47,7 @@ class Files extends React.Component {
             forceShow={window.__isTouch}
             onCreateFile={this.createModule}
             onCreateDirectory={this.createDirectory}
+            onUploadFile={store.isLoggedIn ? this.uploadFile : undefined}
           />
         }
       >

packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/elements.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import DeleteIcon from 'react-icons/lib/md/delete';
+import Tooltip from 'common/components/Tooltip';
+
+export const DeleteFileButton = styled(props => (
+  <Tooltip title="Delete File">
+    <button {...props}>
+      <DeleteIcon />
+    </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;
+  }
+`;

packages/app/src/app/pages/common/Modals/StorageManagementModal/DeleteFileButton/index.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DeleteFileButton } from './elements';
+
+export default class DeleteFileButtonContainer extends React.PureComponent {
+  deleteFile = () => {
+    this.props.onDelete({ id: this.props.id });
+  };
+
+  render() {
+    return <DeleteFileButton onClick={this.deleteFile} />;
+  }
+}