New: Uploads Manager (#128)

* A new uploads interface which supports Box webapp's use cases
* UploadsManager view can be turned on with `useUploadsManager` prop to the `ContentUploader` set to true
* UploadsManager becomes visible when items are being uploaded, it can be expanded and minimized

i18n/en-US.properties

@@ -166,5 +166,15 @@ be.uploadNoDragDrop = Select files from your device
 be.uploadSuccess = Success! Your files have been uploaded
 # Message shown for upload link after a successful upload
 be.uploadSuccessInput = Upload additional files
+# Cancel upload button tooltip
+be.uploadsCancelButtonTooltip = Cancel this upload
+# Text shown when uploads are completed
+be.uploadsManagerUploadComplete = Completed
+# Text shown when uploads failed
+be.uploadsManagerUploadFailed = Some Uploads Failed
+# Text shown when uploads are in progress
+be.uploadsManagerUploadInProgress = Uploading
+# Retry upload button tooltip
+be.uploadsRetryButtonTooltip = Retry upload
 # Shown instead of yesterdays date.
 be.yesterday = yesterday

package.json

@@ -122,7 +122,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-template": "^6.25.0",
     "babel-types": "^6.25.0",
-    "box-react-ui": "^21.2.0",
+    "box-react-ui": "^21.2.2",
     "circular-dependency-plugin": "^4.3.0",
     "classnames": "^2.2.5",
     "color": "^2.0.1",
@@ -185,7 +185,7 @@
     "webpack-dev-server": "^2.9.7"
   },
   "peerDependencies": {
-    "box-react-ui": "^21.2.0",
+    "box-react-ui": "^21.2.2",
     "classnames": "^2.2.5",
     "jsuri": "^1.3.1",
     "lodash": "^4.17.4",

src/api/BaseUpload.js

@@ -7,6 +7,8 @@
 import Base from './Base';
 import { DEFAULT_RETRY_DELAY_MS, MS_IN_S } from '../constants';
 
+const MAX_RETRY = 5;
+
 class BaseUpload extends Base {
     file: File;
     overwrite: boolean;
@@ -71,7 +73,7 @@ class BaseUpload extends Base {
         ) {
             this.errorCallback(error);
             // Retry with exponential backoff for other failures since these are likely to be network errors
-        } else {
+        } else if (this.retryCount < MAX_RETRY) {
             this.retryTimeout = setTimeout(
                 () =>
                     retryUploadFunc({
@@ -80,6 +82,8 @@ class BaseUpload extends Base {
                 2 ** this.retryCount * MS_IN_S
             );
             this.retryCount += 1;
+        } else {
+            this.errorCallback(error);
         }
     };
 }

src/api/uploads/MultiputUpload.js

@@ -192,7 +192,7 @@ class MultiputUpload extends BaseMultiput {
                 (response && (response.status === 403 && response.code === 'storage_limit_exceeded')) ||
                 (response.status === 403 && response.code === 'access_denied_insufficient_permissions')
             ) {
-                this.errorCallback(error);
+                this.errorCallback(response);
                 return;
             }
 
@@ -287,7 +287,8 @@ class MultiputUpload extends BaseMultiput {
      */
     sessionErrorHandler = async (error: ?Error, logEventType: string, logMessage?: string): Promise<any> => {
         this.destroy();
-        this.errorCallback(error);
+        const errorResponse = await this.getErrorResponse(error);
+        this.errorCallback(errorResponse);
 
         try {
             if (!this.sessionEndpoints.logEvent) {
@@ -907,13 +908,17 @@ class MultiputUpload extends BaseMultiput {
      * @param {Object} error
      * @return {Promise<Object>}
      */
-    getErrorResponse = async (error: Object): Promise<Object> => {
+    getErrorResponse = async (error: ?Object): Promise<Object> => {
+        if (!error) {
+            return {};
+        }
+
         const { response } = error;
         if (!response) {
             return {};
         }
 
-        if (response.status === 401 || response.status === 403) {
+        if (response.status === 401) {
             return response;
         }
 

src/api/uploads/UploadReachability.js

@@ -9,7 +9,7 @@ import { DEFAULT_HOSTNAME_UPLOAD } from '../../constants';
 import Xhr from '../../util/Xhr';
 import type { Token } from '../../flowTypes';
 
-const CACHED_RESULTS_LOCAL_STORE_KEY = 'uploads-reachability-cached-results';
+const CACHED_RESULTS_LOCAL_STORE_KEY = 'bcu-uploads-reachability-cached-results';
 
 class UploadsReachability {
     apiHost: string;
@@ -80,7 +80,7 @@ class UploadsReachability {
         }
 
         try {
-            await window.fetch(`${uploadHost}/reachability-test-foo`);
+            await window.fetch(`${uploadHost}/api/2.0/files/upload_sessions/0`);
         } catch (error) {
             return false;
         }