console log upload message (#3083)

* console log upload message

* add error message prompt

frontend/src/components/file-uploader/file-uploader.js

@@ -5,6 +5,7 @@ import MD5 from 'MD5';
 import { enableResumableFileUpload } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import { gettext } from '../../utils/constants';
 import UploadProgressDialog from './upload-progress-dialog';
 import UploadRemindDialog from '../dialog/upload-remind-dialog';
 import '../../css/file-uploader.css';
@@ -40,7 +41,8 @@ class FileUploader extends React.Component {
       isUploadProgressDialogShow: false,
       isUploadRemindDialogShow: false,
       currentResumableFile: null,
-      uploadBitrate: '0'
+      uploadBitrate: '0',
+      allFilesUploaded: false,
     };
 
     this.uploadInput = React.createRef();
@@ -68,6 +70,7 @@ class FileUploader extends React.Component {
       fileParameterName: this.props.fileParameterName,
       generateUniqueIdentifier: this.generateUniqueIdentifier,
       forceChunkSize: true,
+      maxChunkRetries: 3,
     });
 
     this.resumable.assignBrowse(this.uploadInput.current, true);
@@ -331,19 +334,34 @@ class FileUploader extends React.Component {
     this.setState({uploadFileList: uploadFileList});
   }
 
-  onFileError = (file) => {
+  onFileError = (resumableFile, message) => {
+    let error = '';
+    if (!message) {
+      error = gettext('Network error');
+    } else {
+      error = message;
+    }
+
+    let uploadFileList = this.state.uploadFileList.map(item => {
+      if (item.resumableFile.uniqueIdentifier === resumableFile.uniqueIdentifier) {
+        item.resumableFile.error = error;
+      }
+      return item;
+    });
+    this.setState({uploadFileList: uploadFileList});
 
   }
 
   onComplete = () => {
     this.notifiedFolders = [];
+    this.setState({allFilesUploaded: true});
   }
 
   onPause = () => {
 
   }
 
-  onError = () => {
+  onError = (message) => {
 
   }
 
@@ -513,10 +531,11 @@ class FileUploader extends React.Component {
           <UploadProgressDialog
             uploadFileList={this.state.uploadFileList}
             totalProgress={this.state.totalProgress}
+            uploadBitrate={this.state.uploadBitrate}
+            allFilesUploaded={this.state.allFilesUploaded}
             onCloseUploadDialog={this.onCloseUploadDialog}
             onCancelAllUploading={this.onCancelAllUploading}
             onUploadCancel={this.onUploadCancel}
-            uploadBitrate={this.state.uploadBitrate}
           />
         }
       </Fragment>

frontend/src/components/file-uploader/upload-list-item.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 
@@ -33,26 +33,35 @@ class UploadListItem extends React.Component {
   render() {
     let { item } = this.props;
     let progress = Math.round(item.resumableFile.progress() * 100);
+    let error = item.resumableFile.error;
+
     return (
       <tr className="file-upload-item">
-        <td className="upload-name ellipsis">{item.resumableFile.relativePath}</td>
+        <td className="upload-name">
+          <div className="ellipsis">{item.resumableFile.relativePath}</div>
+          <div className="message err-message ml-0">{error}</div>
+        </td>
         <td className="upload-progress">
           <span className="file-size">{this.formatFileSize(item.resumableFile.size)}</span>
-          {progress !== 100 &&
+          {!item.resumableFile.error && progress !== 100 &&
             <div className="progress">
               <div className="progress-bar" role="progressbar" style={{width: `${progress}%`}} aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100"></div>
             </div>
           }
         </td>
         <td className="upload-operation">
-          {(!item.isSaved && progress !== 100) && (
-            <a href="#" onClick={this.onUploadCancel}>{gettext('cancel')}</a>
-          )}
-          {(!item.isSaved && progress === 100) && (
-            <span className="saving">{gettext('saving...')}</span>
-          )}
-          {item.isSaved && (
-            <span className="uploaded">{gettext('uploaded')}</span>
+          {!item.resumableFile.error && (
+            <Fragment>
+              {(!item.isSaved && progress !== 100) && (
+                <a href="#" onClick={this.onUploadCancel}>{gettext('cancel')}</a>
+              )}
+              {(!item.isSaved && progress === 100) && (
+                <span className="saving">{gettext('saving...')}</span>
+              )}
+              {item.isSaved && (
+                <span className="uploaded">{gettext('uploaded')}</span>
+              )}
+            </Fragment>
           )}
         </td>
       </tr>

frontend/src/components/file-uploader/upload-progress-dialog.js

@@ -10,6 +10,7 @@ const propTypes = {
   onCloseUploadDialog: PropTypes.func.isRequired,
   onCancelAllUploading: PropTypes.func.isRequired,
   onUploadCancel: PropTypes.func.isRequired,
+  allFilesUploaded: PropTypes.bool.isRequired,
 };
 
 class UploadProgressDialog extends React.Component {
@@ -70,7 +71,7 @@ class UploadProgressDialog extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {(this.props.totalProgress !== 100) && 
+              {(!this.props.allFilesUploaded) && 
                 <tr><td className="text-right" colSpan={3}><span className="cursor-pointer" onClick={this.onCancelAllUploading}>{gettext('Cancel All')}</span></td></tr>
               }
               {