Add progress bar for Submit button

Fixes #37 Once #25 is addressed, we should add a progress bar there too.
josephfrazier · Jul 10, 2018 · aa88c40 · aa88c40
1 parent 2557b98
commit aa88c40
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/src/routes/home/Home.js b/src/routes/home/Home.js
@@ -788,6 +788,31 @@ class Home extends React.Component {
                       attachmentData: this.state.attachmentData,
                       CreateDate: new Date(this.state.CreateDate).toISOString(),
                     }),
+                    {
+                      onUploadProgress: progressEvent => {
+                        const {
+                          loaded: submitProgressValue,
+                          total: submitProgressMax,
+                        } = progressEvent;
+
+                        this.setState({
+                          submitProgressValue,
+                          submitProgressMax,
+                        });
+                      },
+
+                      onDownloadProgress: progressEvent => {
+                        const {
+                          loaded: submitProgressValue,
+                          total: submitProgressMax,
+                        } = progressEvent;
+
+                        this.setState({
+                          submitProgressValue,
+                          submitProgressMax,
+                        });
+                      },
+                    },
                   )
                   .then(({ data }) => {
                     const { submission } = data;
@@ -1123,6 +1148,19 @@ class Home extends React.Component {
                 <button type="submit" disabled={this.state.isSubmitting}>
                   {this.state.isSubmitting ? 'Submitting...' : 'Submit'}
                 </button>
+
+                {this.state.isSubmitting && (
+                  <div>
+                    <progress
+                      max={this.state.submitProgressMax}
+                      value={this.state.submitProgressValue}
+                    >
+                      {this.state.submitProgressValue}
+                      /
+                      {this.state.submitProgressMax}
+                    </progress>
+                  </div>
+                )}
               </fieldset>
             </form>