re #168, add upload limit checking server-side, update new file/folder popover stlying

Author: catarak

client/modules/IDE/actions/uploader.js

@@ -66,11 +66,11 @@ export function dropzoneAcceptCallback(userId, file, done) {
           done();
         })
         .catch((response) => {
-        file.custom_status = 'rejected'; // eslint-disable-line
-          if (response.data.responseText && response.data.responseText.message) {
+          file.custom_status = 'rejected'; // eslint-disable-line
+          if (response.data && response.data.responseText && response.data.responseText.message) {
             done(response.data.responseText.message);
           }
-          done('error preparing the upload');
+          done('Error: Reached upload limit.');
         });
     }
   };

client/modules/IDE/components/NewFileForm.jsx

@@ -22,16 +22,18 @@ class NewFileForm extends React.Component {
           handleSubmit(this.createFile)(data);
         }}
       >
-        <label className="new-file-form__name-label" htmlFor="name">Name:</label>
-        <input
-          className="new-file-form__name-input"
-          id="name"
-          type="text"
-          placeholder="Name"
-          {...domOnlyProps(name)}
-          ref={(element) => { this.fileName = element; }}
-        />
-        <input type="submit" value="Add File" aria-label="add file" />
+        <div className="new-file-form__input-wrapper">
+          <label className="new-file-form__name-label" htmlFor="name">Name:</label>
+          <input
+            className="new-file-form__name-input"
+            id="name"
+            type="text"
+            placeholder="Name"
+            {...domOnlyProps(name)}
+            ref={(element) => { this.fileName = element; }}
+          />
+          <input type="submit" value="Add File" aria-label="add file" />
+        </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
     );

client/modules/IDE/components/NewFolderForm.jsx

@@ -25,16 +25,18 @@ class NewFolderForm extends React.Component {
           }
         }}
       >
-        <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
-        <input
-          className="new-folder-form__name-input"
-          id="name"
-          type="text"
-          placeholder="Name"
-          ref={(element) => { this.fileName = element; }}
-          {...domOnlyProps(name)}
-        />
-        <input type="submit" value="Add Folder" aria-label="add folder" />
+        <div className="new-folder-form__input-wrapper">
+          <label className="new-folder-form__name-label" htmlFor="name">Name:</label>
+          <input
+            className="new-folder-form__name-input"
+            id="name"
+            type="text"
+            placeholder="Name"
+            ref={(element) => { this.fileName = element; }}
+            {...domOnlyProps(name)}
+          />
+          <input type="submit" value="Add Folder" aria-label="add folder" />
+        </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
       </form>
     );

client/modules/IDE/components/NewFolderModal.jsx

@@ -16,7 +16,7 @@ class NewFolderModal extends React.Component {
       <section className="modal" ref={(element) => { this.newFolderModal = element; }} >
         <div className="modal-content-folder">
           <div className="modal__header">
-            <h2 className="modal__title">Add Folder</h2>
+            <h2 className="modal__title">Create Folder</h2>
             <button className="modal__exit-button" onClick={this.props.closeModal}>
               <InlineSVG src={exitUrl} alt="Close New Folder Modal" />
             </button>

client/modules/IDE/components/Sidebar.jsx

@@ -96,7 +96,7 @@ class Sidebar extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  Add folder
+                  Create folder
                 </button>
               </li>
               <li>

client/modules/IDE/components/UploadFileModal.jsx

@@ -36,9 +36,9 @@ class UploadFileModal extends React.Component {
           { this.props.reachedTotalSizeLimit &&
             <p>
               {
-                `You have reached the size limit for the number of files you can upload to your account.
+                `Error: You cannot upload any more files. You have reached the total size limit of 250MB.
                 If you would like to upload more, please remove the ones you aren't using anymore by
-                looking through your `
+                in your `
               }
               <Link to="/assets">assets</Link>
               {'.'}

client/modules/IDE/selectors/users.js

@@ -1,7 +1,9 @@
 import { createSelector } from 'reselect';
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
 const getAuthenticated = state => state.user.authenticated;
 const getTotalSize = state => state.user.totalSize;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
 
 export const getCanUploadMedia = createSelector(
   getAuthenticated,
@@ -10,16 +12,16 @@ export const getCanUploadMedia = createSelector(
     if (!authenticated) return false;
     // eventually do the same thing for verified when
     // email verification actually works
-    if (totalSize > 250000000) return false;
+    if (totalSize > limit) return false;
     return true;
   }
 );
 
 export const getreachedTotalSizeLimit = createSelector(
   getTotalSize,
   (totalSize) => {
-    if (totalSize > 250000000) return true;
-    //if (totalSize > 1000) return true;
+    if (totalSize > limit) return true;
+    // if (totalSize > 1000) return true;
     return false;
   }
 );

client/styles/components/_modal.scss

@@ -10,7 +10,7 @@
 .modal-content {
   @extend %modal;
   min-height: #{150 / $base-font-size}rem;
-  width: #{700 / $base-font-size}rem;
+  width: #{500 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
   .modal--reduced & {
     //min-height: #{150 / $base-font-size}rem;
@@ -32,9 +32,8 @@
   margin-bottom: #{20 / $base-font-size}rem;
 }
 
-.new-file-form, .new-file-folder {
+.new-folder-form__input-wrapper, .new-file-form__input-wrapper {
   display: flex;
-  flex-wrap: wrap;
 }
 
 .new-file-form__name-label, .new-folder-form__name-label {
@@ -43,6 +42,7 @@
 
 .new-file-form__name-input, .new-folder-form__name-input {
   margin-right: #{10 / $base-font-size}rem;
+  flex: 1;
 }
 
 .modal__divider {

server/controllers/aws.controller.js

@@ -73,6 +73,11 @@ export function deleteObjectFromS3(req, res) {
 }
 
 export function signS3(req, res) {
+  const limit = process.env.UPLOAD_LIMIT || 250000000;
+  if (req.user.totalSize > limit) {
+    res.status(403).send({message: 'user has uploaded the maximum size of assets.'});
+    return;
+  }
   const fileExtension = getExtension(req.body.name);
   const filename = uuid.v4() + fileExtension;
   const acl = 'public-read';

server/views/index.js

@@ -31,6 +31,7 @@ export function renderIndex() {
         window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
         window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
         window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
+        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT === 'false' ? false : true};
       </script>
     </head>
     <body>