Implementing per-partes upload using new API endpoints. ReCodEx can handle slow uploads of large files now.

Author: Martin Krulis

.babelrc

@@ -1,12 +1,16 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "plugins": [
     ["formatjs", {
         "ast": true
     }],
     "transform-object-assign",
     "transform-flow-strip-types",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
   ],
   "env": {
     "production": {

package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-inline-elements": "^7.14.5",
+    "@babel/runtime": "^7.14.6",
     "@formatjs/intl-pluralrules": "^4.0.27",
     "@formatjs/intl-relativetimeformat": "^9.1.6",
     "@fortawesome/fontawesome-free": "^5.15.3",
@@ -100,6 +101,7 @@
     "@babel/core": "^7.14.6",
     "@babel/node": "^7.14.7",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/register": "^7.14.5",
@@ -112,9 +114,11 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.0",
+    "babel-regenerator-runtime": "^6.5.0",
     "chai": "^4.3.4",
     "chai-spies": "^1.0.0",
     "colors": "^1.4.0",
+    "core-js": "^3.15.2",
     "css-loader": "^5.2.6",
     "css-modules-require-hook": "^4.2.3",
     "dotenv": "^10.0.0",

src/components/Assignments/EvaluationProgress/EvaluationProgress.js

@@ -54,9 +54,9 @@ class EvaluationProgress extends Component {
         </Modal.Header>
         <Modal.Body>
           <ProgressBar>
-            <ProgressBar now={completed} variant="success" active={!finished} />
-            <ProgressBar now={skipped} variant="warning" active={!finished} />
-            <ProgressBar now={failed} variant="danger" active={!finished} />
+            <ProgressBar now={completed} variant="success" animated={!finished} />
+            <ProgressBar now={skipped} variant="warning" animated={!finished} />
+            <ProgressBar now={failed} variant="danger" animated={!finished} />
           </ProgressBar>
           {messages && (
             <div

src/components/Exercises/FilesTable/AttachmentFilesTableHeaderRow.js

@@ -10,7 +10,7 @@ const AttachmentFilesTableHeaderRow = () => (
       <FormattedMessage id="app.attachmentFilesTable.url" defaultMessage="URL" />
     </th>
     <th>
-      <FormattedMessage id="app.filesTable.fileSize" defaultMessage="File Size" />
+      <FormattedMessage id="app.uploadFiles.fileSize" defaultMessage="File Size" />
     </th>
     <th>
       <FormattedMessage id="generic.uploadedAt" defaultMessage="Uploaded at" />

src/components/Exercises/FilesTable/FilesTable.js

@@ -31,7 +31,7 @@ const FilesTable = ({
       <p className="text-center">
         <Button variant="success" disabled={!canSubmit} onClick={() => addFiles(newFiles)}>
           <SendIcon gapRight />
-          <FormattedMessage id="app.filesTable.addFiles" defaultMessage="Save files" />
+          <FormattedMessage id="app.filesTable.saveUploadedFilesButton" defaultMessage="Save Uploaded Files" />
         </Button>
       </p>
     )}
@@ -62,7 +62,7 @@ const FilesTable = ({
       {files.length === 0 && (
         <p className="text-center em-padding">
           <Icon icon={['far', 'folder-open']} gapRight />
-          <FormattedMessage id="app.filesTable.empty" defaultMessage="There are no uploaded files yet." />
+          <FormattedMessage id="app.filesTable.empty" defaultMessage="There are no saved files yet." />
         </p>
       )}
 

src/components/Exercises/FilesTable/SupplementaryFilesTableHeaderRow.js

@@ -8,7 +8,7 @@ const SupplementaryFilesTableHeaderRow = ({ viewOnly }) => (
       <FormattedMessage id="app.filesTable.originalFileName" defaultMessage="Original File Name" />
     </th>
     <th>
-      <FormattedMessage id="app.filesTable.fileSize" defaultMessage="File Size" />
+      <FormattedMessage id="app.uploadFiles.fileSize" defaultMessage="File Size" />
     </th>
     <th>
       <FormattedMessage id="generic.uploadedAt" defaultMessage="Uploaded at" />

src/components/Solutions/SubmitSolution/SubmitSolution.js

@@ -12,7 +12,7 @@ import UploadContainer from '../../../containers/UploadContainer';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
 import Confirm from '../../forms/Confirm';
 
-import { createGetUploadedFiles } from '../../../redux/selectors/upload';
+import { uploadedFilesSelector } from '../../../redux/selectors/upload';
 import { hasEntryPoint } from '../../../redux/selectors/submission';
 import { getConfigVar } from '../../../helpers/config';
 
@@ -369,7 +369,7 @@ SubmitSolution.propTypes = {
 export default injectIntl(
   connect(
     (state, { uploadId, isReferenceSolution = false }) => ({
-      attachedFiles: createGetUploadedFiles(uploadId)(state),
+      attachedFiles: uploadedFilesSelector(state, uploadId),
       messages: isReferenceSolution ? referenceSolutionMessages : submissionMessages,
     }),
     () => ({})

src/components/Solutions/Upload/Upload.js

@@ -10,67 +10,69 @@ const dropZoneStyles = {
   borderWidth: 2,
   borderColor: '#666',
   borderStyle: 'dashed',
-  padding: 40,
-  marginBottom: 20,
-  borderRadius: 5,
-  fontSize: 20,
+  padding: '0.5em',
+  marginBottom: '0.5em',
+  borderRadius: '5px',
   textAlign: 'center',
 };
 
 const Upload = ({
-  uploadFiles,
   uploadingFiles,
-  attachedFiles,
+  uploadedFiles,
   failedFiles,
   removedFiles,
-  removeFile,
-  returnFile,
-  removeFailedFile,
-  retryUploadFile,
+  doUploadFiles,
+  doRequestUploadCancel,
+  doRemoveFile,
+  doRestoreRemovedFile,
+  doRemoveFailedFile,
+  doRetryUploadFile,
 }) => (
   <div>
-    <Dropzone onDrop={uploadFiles}>
+    <Dropzone onDrop={doUploadFiles}>
       {({ getRootProps, getInputProps }) => (
         <div {...getRootProps()} style={dropZoneStyles}>
           <input {...getInputProps()} />
-          <p>
-            <FormattedMessage id="app.submitSolution.dragAndDrop" defaultMessage="Drag and drop files here." />
-          </p>
-          <p>
+          <div className="my-3">
             <Button variant="primary">
               <UploadIcon gapRight />
-              <FormattedMessage id="app.submitSolution.addFile" defaultMessage="Add File(s)" />
+              <FormattedMessage id="app.uploadFiles.addFileButton" defaultMessage="Select File(s) for Upload" />
             </Button>
-          </p>
+          </div>
+          <div className="small text-muted my-3">
+            <FormattedMessage id="app.uploadFiles.dragAndDrop" defaultMessage="Or simply drag and drop files here..." />
+          </div>
         </div>
       )}
     </Dropzone>
 
-    {(uploadingFiles.length > 0 || attachedFiles.length > 0 || failedFiles.length > 0 || removedFiles.length > 0) && (
+    {(uploadingFiles.length > 0 || uploadedFiles.length > 0 || failedFiles.length > 0 || removedFiles.length > 0) && (
       <UploadsTable
         uploadingFiles={uploadingFiles}
-        attachedFiles={attachedFiles}
+        uploadedFiles={uploadedFiles}
         failedFiles={failedFiles}
         removedFiles={removedFiles}
-        removeFile={removeFile}
-        returnFile={returnFile}
-        removeFailedFile={removeFailedFile}
-        retryUploadFile={retryUploadFile}
+        doRequestUploadCancel={doRequestUploadCancel}
+        doRemoveFile={doRemoveFile}
+        doRestoreRemovedFile={doRestoreRemovedFile}
+        doRemoveFailedFile={doRemoveFailedFile}
+        doRetryUploadFile={doRetryUploadFile}
       />
     )}
   </div>
 );
 
 Upload.propTypes = {
   uploadingFiles: PropTypes.array.isRequired,
-  attachedFiles: PropTypes.array.isRequired,
+  uploadedFiles: PropTypes.array.isRequired,
   failedFiles: PropTypes.array.isRequired,
   removedFiles: PropTypes.array.isRequired,
-  uploadFiles: PropTypes.func.isRequired,
-  removeFile: PropTypes.func.isRequired,
-  returnFile: PropTypes.func.isRequired,
-  removeFailedFile: PropTypes.func.isRequired,
-  retryUploadFile: PropTypes.func.isRequired,
+  doRequestUploadCancel: PropTypes.func.isRequired,
+  doUploadFiles: PropTypes.func.isRequired,
+  doRemoveFile: PropTypes.func.isRequired,
+  doRestoreRemovedFile: PropTypes.func.isRequired,
+  doRemoveFailedFile: PropTypes.func.isRequired,
+  doRetryUploadFile: PropTypes.func.isRequired,
 };
 
 export default Upload;