Add upload progress indicator

.eslintrc

@@ -8,6 +8,7 @@ globals:
   jQuery: true
 rules:
   camelcase: 0
+  no-mixed-operators: 0
   no-plusplus: 0
   no-param-reassign:
     - error

js/actions/index.js

@@ -15,6 +15,7 @@ export const types = {
   REQUEST_FORM_UPDATE: 'REQUEST_FORM_UPDATE',
   REQUEST_FORM_SUBMIT: 'REQUEST_FORM_SUBMIT',
   REQUEST_FORM_SUBMIT_COMPLETE: 'REQUEST_FORM_SUBMIT_COMPLETE',
+  REQUEST_FORM_SUBMIT_PROGRESS: 'REQUEST_FORM_SUBMIT_PROGRESS',
 };
 
 // Action creators, to dispatch actions
@@ -92,7 +93,11 @@ export const requestActions = {
       formData,
     });
 
-    return requestapi.post('/webform/submit', formData)
+    const options = {
+      onUploadProgress: requestActions.submitRequestFormProgress,
+    };
+
+    return requestapi.post('/webform/submit', formData, options)
       .catch((error) => {
         const submissionResult = {
           errorMessage: 'There was a problem submitting your form.',
@@ -107,6 +112,15 @@ export const requestActions = {
       .then(requestActions.completeSubmitRequestForm);
   },
 
+  submitRequestFormProgress(progress) {
+    dispatcher.dispatch({
+      type: types.REQUEST_FORM_SUBMIT_PROGRESS,
+      progress,
+    });
+
+    return Promise.resolve();
+  },
+
   completeSubmitRequestForm(submissionResult) {
     dispatcher.dispatch({
       type: types.REQUEST_FORM_SUBMIT_COMPLETE,

js/components/foia_request_form.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Form from 'react-jsonschema-form';
+import { Map } from 'immutable';
 
 import CustomFieldTemplate from 'components/request_custom_field_template';
 import USWDSRadioWidget from 'components/uswds_radio_widget';
@@ -11,9 +12,10 @@ import ObjectFieldTemplate from './object_field_template';
 import rf from '../util/request_form';
 import FoiaFileWidget from './foia_file_widget';
 import { dataUrlToAttachment, findFileFields } from '../util/attachment';
+import UploadProgress from './upload_progress';
 
 
-function FoiaRequestForm({ formData, isSubmitting, onSubmit, requestForm, submissionResult }) {
+function FoiaRequestForm({ formData, upload, onSubmit, requestForm, submissionResult }) {
   function onChange({ formData: data }) {
     requestActions.updateRequestForm(data);
   }
@@ -59,7 +61,7 @@ function FoiaRequestForm({ formData, isSubmitting, onSubmit, requestForm, submis
   return (
     <Form
       className="foia-request-form"
-      disabled={isSubmitting}
+      disabled={upload.get('inProgress')}
       FieldTemplate={CustomFieldTemplate}
       formContext={formContext}
       formData={formData.toJS()}
@@ -87,6 +89,12 @@ function FoiaRequestForm({ formData, isSubmitting, onSubmit, requestForm, submis
         >
           Submit request
         </button>
+        { upload.get('inProgress') &&
+          <UploadProgress
+            progressTotal={upload.get('progressTotal')}
+            progressLoaded={upload.get('progressLoaded')}
+          />
+        }
         { submissionResult.errorMessage &&
           <p>
             <span className="usa-input-error-message" role="alert">
@@ -101,7 +109,7 @@ function FoiaRequestForm({ formData, isSubmitting, onSubmit, requestForm, submis
 
 FoiaRequestForm.propTypes = {
   formData: PropTypes.object.isRequired,
-  isSubmitting: PropTypes.bool.isRequired,
+  upload: PropTypes.instanceOf(Map).isRequired,
   onSubmit: PropTypes.func,
   requestForm: PropTypes.object.isRequired,
   submissionResult: PropTypes.instanceOf(SubmissionResult).isRequired,

js/components/upload_progress.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+function UploadProgress({ progressLoaded, progressTotal }) {
+  const percentage = Math.floor(progressLoaded / progressTotal * 100);
+  return (
+    <div>
+      { progressLoaded &&
+        <progress
+          value={progressLoaded}
+          max={progressTotal}
+        >
+          {percentage}% uploaded…
+        </progress>
+      }
+      <p>Please be patient while we upload your request.</p>
+    </div>
+  );
+}
+
+UploadProgress.propTypes = {
+  progressLoaded: PropTypes.number,
+  progressTotal: PropTypes.number,
+};
+
+UploadProgress.defaultProps = {
+  progressTotal: 0,
+  progressLoaded: 0,
+};
+
+
+export default UploadProgress;

js/pages/agency_component_request.jsx

@@ -21,12 +21,12 @@ class AgencyComponentRequestPage extends Component {
     const agencyComponentId = props.match.params.agencyComponentId;
     const agencyComponent = agencyComponentStore.getAgencyComponent(agencyComponentId);
     const requestForm = agencyComponentRequestFormStore.getAgencyComponentForm(agencyComponentId);
-    const { formData, isSubmitting, submissionResult } = foiaRequestStore.getState();
+    const { formData, upload, submissionResult } = foiaRequestStore.getState();
 
     return {
       agencyComponent,
       formData,
-      isSubmitting,
+      upload,
       submissionResult,
       requestForm,
     };
@@ -92,7 +92,7 @@ class AgencyComponentRequestPage extends Component {
       mainContent = (
         <FoiaRequestForm
           formData={this.state.formData}
-          isSubmitting={this.state.isSubmitting}
+          upload={this.state.upload}
           onSubmit={onSubmit}
           requestForm={requestForm}
           submissionResult={this.state.submissionResult}

js/stores/foia_request.js

@@ -18,7 +18,7 @@ class FoiaRequestStore extends Store {
 
     this.state = {
       formData: new Map(),
-      isSubmitting: false,
+      upload: new Map(),
       submissionResult: new SubmissionResult(),
     };
   }
@@ -40,12 +40,16 @@ class FoiaRequestStore extends Store {
       }
 
       case types.REQUEST_FORM_SUBMIT: {
-        if (this.state.isSubmitting) {
+        if (this.state.upload.get('inProgress')) {
           break;
         }
 
         Object.assign(this.state, {
-          isSubmitting: true,
+          upload: this.state.upload.merge({
+            inProgress: true,
+            progressLoaded: 0,
+            progressTotal: 0,
+          }),
           // Reset the previous submission results
           submission_id: null,
           errorMessage: null,
@@ -55,11 +59,27 @@ class FoiaRequestStore extends Store {
         break;
       }
 
+      case types.REQUEST_FORM_SUBMIT_PROGRESS: {
+        const progress = payload.progress;
+        if (!progress.lengthComputable) {
+          break;
+        }
+
+        Object.assign(this.state, {
+          upload: this.state.upload.merge({
+            progressLoaded: progress.loaded,
+            progressTotal: progress.total,
+          }),
+        });
+        this.__emitChange();
+        break;
+      }
+
       case types.REQUEST_FORM_SUBMIT_COMPLETE: {
         const { submissionResult } = this.state;
         Object.assign(this.state, {
           submissionResult: submissionResult.clear().merge(payload.submissionResult),
-          isSubmitting: false,
+          upload: this.state.upload.clear(),
         });
         this.__emitChange();
         break;

js/test/components/foia_request_form.test.jsx

@@ -63,9 +63,11 @@ describe('FoiaRequestForm', () => {
       let requestForm;
       let submissionResult;
       let element;
+      let upload;
 
       beforeEach(() => {
         formData = new Map();
+        upload = new Map();
         submissionResult = new SubmissionResult();
         requestForm = simpleSingleSectionRequestForm();
       });
@@ -75,7 +77,7 @@ describe('FoiaRequestForm', () => {
           element = shallow(
             <FoiaRequestForm
               formData={formData}
-              isSubmitting={false}
+              upload={upload}
               requestForm={requestForm}
               submissionResult={submissionResult}
             />,
@@ -92,7 +94,7 @@ describe('FoiaRequestForm', () => {
           element = render(
             <FoiaRequestForm
               formData={formData}
-              isSubmitting={false}
+              upload={upload}
               requestForm={requestForm}
               submissionResult={submissionResult}
             />,
@@ -122,7 +124,7 @@ describe('FoiaRequestForm', () => {
           element = shallow(
             <FoiaRequestForm
               formData={formData}
-              isSubmitting={false}
+              upload={upload}
               onSubmit={onSubmit}
               requestForm={requestForm}
               submissionResult={submissionResult}
@@ -174,7 +176,7 @@ describe('FoiaRequestForm', () => {
           element = render(
             <FoiaRequestForm
               formData={formData}
-              isSubmitting={false}
+              upload={upload}
               requestForm={requestForm}
               submissionResult={submissionResult}
             />,