New: ContentUploader fileLimit option (#71)

- Support `fileLimit` option that limits number of files that can be uploaded at once. If more than `fileLimit` files are selected, they will be truncated and a warning message will be shown in the footer.
- Add null checks during error handling
- Update uploader test file to use simple token generator function

Author: tonyjin

src/api/ChunkedUpload.js

@@ -67,7 +67,7 @@ class ChunkedUpload extends Base {
 
         // Automatically handle name conflict errors
         const { response } = error;
-        if (response.status === 409) {
+        if (response && response.status === 409) {
             const { name } = this.file;
 
             if (this.overwrite) {

src/api/PlainUpload.js

@@ -78,7 +78,7 @@ class PlainUpload extends Base {
         }
 
         // Automatically handle name conflict errors
-        if (error.status === 409) {
+        if (error && error.status === 409) {
             if (this.overwrite) {
                 // Error response contains file ID to upload a new file version for
                 this.makePreflightRequest({

src/components/ContentUploader/ContentUploader.js

@@ -42,6 +42,7 @@ type Props = {
     clientName: string,
     className: string,
     chunked: boolean,
+    fileLimit: number,
     onClose: Function,
     onComplete: Function,
     getLocalizedMessage: Function,
@@ -57,17 +58,20 @@ type DefaultProps = {|
     chunked: boolean,
     className: string,
     clientName: string,
+    fileLimit: number,
     uploadHost: string,
     onClose: Function,
     onComplete: Function
 |};
 
 type State = {
     view: View,
-    items: UploadItem[]
+    items: UploadItem[],
+    message: string
 };
 
 const CHUNKED_UPLOAD_MIN_SIZE_BYTES = 52428800; // 50MB
+const FILE_LIMIT_DEFAULT = 100; // Upload at most 100 files at once by default
 
 class ContentUploader extends Component<DefaultProps, Props, State> {
     id: string;
@@ -82,6 +86,7 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
         chunked: true,
         className: '',
         clientName: CLIENT_NAME_CONTENT_UPLOADER,
+        fileLimit: FILE_LIMIT_DEFAULT,
         uploadHost: DEFAULT_HOSTNAME_UPLOAD,
         onClose: noop,
         onComplete: noop
@@ -98,7 +103,8 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
         const { rootFolderId, token } = props;
         this.state = {
             view: rootFolderId && token ? VIEW_UPLOAD_EMPTY : VIEW_ERROR,
-            items: []
+            items: [],
+            message: ''
         };
         this.id = uniqueid('bcu_');
     }
@@ -162,7 +168,7 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
      * @return {void}
      */
     addFilesToUploadQueue = (files: File[]) => {
-        const { chunked } = this.props;
+        const { chunked, fileLimit, getLocalizedMessage } = this.props;
         const { view, items } = this.state;
 
         // Disable chunked upload in IE11 for now until hashing is done in a worker
@@ -207,7 +213,20 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
                 return uploadItem;
             });
 
-        this.updateViewAndCollection(items.concat(newItems));
+        let updatedItems = [];
+        const totalNumOfItems = items.length + newItems.length;
+
+        // Don't add more than fileLimit # of items
+        if (totalNumOfItems > fileLimit) {
+            updatedItems = items.concat(newItems.slice(0, fileLimit - items.length));
+            this.setState({
+                message: getLocalizedMessage('buik.upload.message.toomanyfiles', { fileLimit })
+            });
+        } else {
+            updatedItems = items.concat(newItems);
+        }
+
+        this.updateViewAndCollection(updatedItems);
 
         // Automatically start upload if other files are being uploaded
         if (view === VIEW_UPLOAD_IN_PROGRESS) {
@@ -357,7 +376,7 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
     };
 
     /**
-     * Handles an upload error.
+     * Handles an upload progress event.
      *
      * @private
      * @param {UploadItem} item - Upload item corresponding to progress event
@@ -409,7 +428,7 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
      */
     render() {
         const { onClose, getLocalizedMessage, className, measureRef, isTouch }: Props = this.props;
-        const { view, items }: State = this.state;
+        const { view, items, message }: State = this.state;
 
         const hasFiles = items.length !== 0;
         const isLoading = items.some((item) => item.status === STATUS_IN_PROGRESS);
@@ -431,6 +450,7 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
                     getLocalizedMessage={getLocalizedMessage}
                     hasFiles={hasFiles}
                     isLoading={isLoading}
+                    message={message}
                     onCancel={this.cancel}
                     onClose={onClose}
                     onUpload={this.upload}

src/components/ContentUploader/Footer.js

@@ -10,13 +10,14 @@ import './Footer.scss';
 type Props = {
     isLoading: boolean,
     hasFiles: boolean,
+    message: string,
     onCancel: Function,
     onClose?: Function,
     onUpload: Function,
     getLocalizedMessage: Function
 };
 
-const Footer = ({ isLoading, hasFiles, onCancel, onClose, onUpload, getLocalizedMessage }: Props) =>
+const Footer = ({ isLoading, hasFiles, message, onCancel, onClose, onUpload, getLocalizedMessage }: Props) =>
     <div className='bcu-footer'>
         <div className='bcu-footer-left'>
             {onClose
@@ -25,6 +26,9 @@ const Footer = ({ isLoading, hasFiles, onCancel, onClose, onUpload, getLocalized
                 </Button>
                 : null}
         </div>
+        <div className='bcu-footer-message'>
+            {message}
+        </div>
         <div className='bcu-footer-right'>
             <Button isDisabled={!hasFiles} onClick={onCancel}>
                 {getLocalizedMessage('buik.footer.button.cancel.uploads')}

src/components/ContentUploader/Footer.scss

@@ -9,7 +9,16 @@
     justify-content: space-between;
     padding: 0 20px;
 
-    .bcu-footer-right .buik-btn {
-        margin-left: 8px;
+    .bcu-footer-message {
+        padding: 0 10px;
+        text-align: center;
+    }
+
+    .bcu-footer-right {
+        flex-shrink: 0;
+
+        .buik-btn {
+            margin-left: 8px;
+        }
     }
 }

src/i18n/en-US.properties

@@ -164,6 +164,8 @@ buik.sort.option.name.desc = Name: Z → A
 buik.sort.option.size.asc = Size: Smallest → Largest
 # Size descending option shown in the share access drop down select.
 buik.sort.option.size.desc = Size: Largest → Smallest
+# Message shown when too many files are uploaded at once
+buik.upload.message.toomanyfiles = You can only upload up to {fileLimit} files at a time.
 # Message shown when there are no items to upload
 buik.upload.state.empty = Drag and drop files or
 # Message shown for upload link when there are no items to upload

src/messages.js

@@ -298,6 +298,11 @@ const messages: { [string]: IntlDescriptor } = defineMessages({
         description: 'Text for create folder dialog button',
         defaultMessage: 'Create'
     },
+    'buik.upload.message.toomanyfiles': {
+        id: 'buik.upload.message.toomanyfiles',
+        description: 'Message shown when too many files are uploaded at once',
+        defaultMessage: 'You can only upload up to {fileLimit} files at a time.'
+    },
     'buik.upload.state.error': {
         id: 'buik.upload.state.error',
         description: 'Message shown when there is a network error when uploading',

test/uploader.html

@@ -74,9 +74,21 @@ <h1>Content Uploader</h1>
                 localStorage.setItem('token', token);
                 localStorage.setItem('folderId', folderId);
 
+                const typedId = `folder_${folderId}`;
+
+                const tokenGenerator = () => {
+
+                    // Resolve with a map of typed ID (aka file_{FILE_ID} or folder_{FOLDER_ID}) -> token to use
+                    const tokenMap = {
+                        [typedId]: token
+                    }
+
+                    return Promise.resolve(tokenMap);
+                };
+
                 const uploader1 = new ContentUploader();
                 document.querySelector('.uploader1').innerHTML = '';
-                uploader1.show(folderId, token, {
+                uploader1.show(folderId, tokenGenerator, {
                     container: '.uploader1'
                 });
             }