From 3c9b0b161f2de97a31163eeaafa2c797a2209bdc Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 14:43:03 -0500
Subject: [PATCH 01/35] Start adding front end styling for file upload

---
 frontend/src/components/FileUploader.css      | 14 ++++
 frontend/src/components/FileUploader.js       | 73 ++++++++++++-------
 frontend/src/components/Navigator/index.js    |  4 +-
 frontend/src/fetchers/File.js                 |  9 +++
 .../ActivityReport/Pages/topicsResources.js   |  8 +-
 frontend/src/pages/ActivityReport/index.js    |  1 +
 6 files changed, 77 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/fetchers/File.js

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index d14ce5f7ea..cf0e827586 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -23,3 +23,17 @@
 .fa-stack {
   width: 1em;
 }
+
+.files-table {
+  width: 100%;
+  border-collapse: collapse;
+  /* border: 1px solid #979797; */
+}
+
+/* .files-table--file-name {
+  width: 50%;
+} */
+
+.files-table td {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 6c68e5eb05..d4f78a6c8e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
 
 import './FileUploader.css';
@@ -18,6 +18,7 @@ import './FileUploader.css';
 function Dropzone(props) {
   const { onChange } = props;
   const onDrop = (e) => {
+    console.log(e)
     onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
@@ -37,30 +38,23 @@ function Dropzone(props) {
   };
 
   const textStyle = {
-    textAlign: 'center',
-    fontSize: '16px',
+    textAlign: 'left',
+    fontSize: '1.25rem',
+    backgroundColor: "#0166AB",
+    color: "white", 
+    padding: ".5rem",
+    borderRadius: "5px",
   };
 
-  const linkStyle = {
-    cursor: 'pointer',
-    color: 'blue',
-    textDecoration: 'underline',
-  };
 
   return (
     <div
       {...getRootProps()}
-      style={containerStyle}
     >
       <input {...getInputProps()} />
-      <p style={textStyle}>
-        <b>Drag and drop your files here</b>
-        {' '}
-        <br />
-        or
-        <br />
-        <span style={linkStyle}>Browse files</span>
-      </p>
+      <button className="usa-button">
+        Browse files
+      </button>
     </div>
   );
 }
@@ -81,13 +75,33 @@ const FileUploader = ({ onChange, files }) => {
   return (
     <>
       <Dropzone onChange={onFilesAdded} />
-      <Grid row gap className="margin-top-2">
+      <table row gap className="margin-top-2 files-table">
+        <thead bgcolor="#F8F8F8">
+        <th>
+          Name
+        </th>
+        <th>
+          Size
+        </th>
+        <th>
+          Status
+        </th>
+        <th>
+        </th>
+        </thead>
+        <tbody>
         {files.map((file, index) => (
-          <Grid key={file.name} col={6} className="margin-top-1">
-            <Tag className="smart-hub--file-tag">
-              <div className="smart-hub--file-tag-text">
-                {file.name}
-              </div>
+        <tr>
+            <td className="files-table--file-name">
+              {file.name}
+            </td>
+            <td>
+              {`${(file.size / 1000).toFixed(1) } KB`}
+            </td>
+            <td>
+              Uploaded
+            </td>
+          <td>
               <Button
                 role="button"
                 className="smart-hub--file-tag-button"
@@ -96,14 +110,17 @@ const FileUploader = ({ onChange, files }) => {
                 onClick={() => { onFileRemoved(index); }}
               >
                 <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="white" icon={faCircle} />
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTimes} />
+                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
                 </span>
               </Button>
-            </Tag>
-          </Grid>
+          </td>
+
+          </tr>
+
         ))}
-      </Grid>
+        </tbody>
+      </table>
+        
     </>
   );
 };
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 1b7f0c2650..9a5e59a53c 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -29,6 +29,7 @@ function Navigator({
   additionalData,
   onSave,
   autoSaveInterval,
+  reportId,
 }) {
   const [formData, updateFormData] = useState(initialData);
   const [errorMessage, updateErrorMessage] = useState();
@@ -131,6 +132,7 @@ function Navigator({
               submitted,
               onFormSubmit,
               additionalData,
+              reportId,
             )}
           {!page.review
             && (
@@ -142,7 +144,7 @@ function Navigator({
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
-                  {page.render(hookForm, additionalData)}
+                  {page.render(hookForm, additionalData, reportId)}
                   <Button type="submit" disabled={!isValid}>Continue</Button>
                 </Form>
               </Container>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
new file mode 100644
index 0000000000..31389dca62
--- /dev/null
+++ b/frontend/src/fetchers/File.js
@@ -0,0 +1,9 @@
+import join from 'url-join';
+import { get, put, post } from './index';
+
+const activityReportUrl = join('/', 'api', 'files');
+
+export const uploadFile = async (data) => {
+  const res = await post(activityReportUrl, data);
+  return res.json();
+};
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 86bc9df499..11fb22fafb 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -15,6 +15,7 @@ import { topics } from '../constants';
 const TopicsResources = ({
   register,
   control,
+  reportId,
 }) => (
   <>
     <Helmet>
@@ -56,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
           )}
         />
       </div>
@@ -69,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} id="attachments" />
+          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>
@@ -113,12 +114,13 @@ export default {
   path: 'topics-resources',
   sections,
   review: false,
-  render: (hookForm) => {
+  render: (hookForm, additionalData, reportId) => {
     const { control, register } = hookForm;
     return (
       <TopicsResources
         register={register}
         control={control}
+        reportId={reportId}
       />
     );
   },
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 63d73e048d..e37542bc44 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -137,6 +137,7 @@ function ActivityReport({ match }) {
       <Helmet titleTemplate="%s - Activity Report - TTA Smart Hub" defaultTitle="TTA Smart Hub - Activity Report" />
       <h1 className="new-activity-report">New activity report for Region 14</h1>
       <Navigator
+        reportId={reportId.current}
         currentPage={currentPage}
         submitted={submitted}
         additionalData={initialAdditionalData}

From c9014d5aaa92b3521e11a43d14343807fb2925a2 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 15:14:53 -0500
Subject: [PATCH 02/35] Style file upload

---
 frontend/src/components/FileUploader.css | 14 +++++--
 frontend/src/components/FileUploader.js  | 48 +++++++++++++++---------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index cf0e827586..90d6710490 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -30,10 +30,16 @@
   /* border: 1px solid #979797; */
 }
 
-/* .files-table--file-name {
-  width: 50%;
-} */
+.files-table--thead th, .files-table td {
+  padding: .5rem;
+  text-align: left;
+  font-size: .9rem;
+}
+.files-table--container {
+  border: solid 1px #979797;
+  min-height: 8rem;
+}
 
-.files-table td {
+.files-table--empty {
   text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index d4f78a6c8e..b5b78b199e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -63,30 +63,27 @@ Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const FileUploader = ({ onChange, files }) => {
-  const onFilesAdded = (newFiles) => {
-    onChange([...files, ...newFiles]);
-  };
-
-  const onFileRemoved = (removedFileIndex) => {
-    onChange(files.filter((f, index) => (index !== removedFileIndex)));
-  };
-
+const FileTable = ({onFileRemoved, files}) => {
+  let msg 
+  if (files.length === 0) {
+    msg = (
+      <p className="files-table--empty">No files uploaded</p>
+    )
+  }
   return (
-    <>
-      <Dropzone onChange={onFilesAdded} />
-      <table row gap className="margin-top-2 files-table">
-        <thead bgcolor="#F8F8F8">
-        <th>
+    <div className="files-table--container margin-top-2">
+      <table row gap className="files-table">
+        <thead className="files-table--thead" bgcolor="#F8F8F8">
+        <th width="50%">
           Name
         </th>
-        <th>
+        <th width="20%">
           Size
         </th>
-        <th>
+        <th width="20%">
           Status
         </th>
-        <th>
+        <th width="10%">
         </th>
         </thead>
         <tbody>
@@ -120,6 +117,23 @@ const FileUploader = ({ onChange, files }) => {
         ))}
         </tbody>
       </table>
+      { msg }
+    </div>
+  );
+}
+const FileUploader = ({ onChange, files }) => {
+  const onFilesAdded = (newFiles) => {
+    onChange([...files, ...newFiles]);
+  };
+
+  const onFileRemoved = (removedFileIndex) => {
+    onChange(files.filter((f, index) => (index !== removedFileIndex)));
+  };
+
+  return (
+    <>
+      <Dropzone onChange={onFilesAdded} />
+      <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
   );

From 9d688011a5a88582183eee82380412abfe77a93d Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 16:26:31 -0500
Subject: [PATCH 03/35] enable file upload

---
 frontend/src/components/FileUploader.js       | 27 ++++++++++++++++---
 frontend/src/fetchers/File.js                 | 13 ++++++---
 .../ActivityReport/Pages/topicsResources.js   |  4 +--
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index b5b78b199e..3582f60de9 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -8,16 +8,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
+import * as FS from 'fs';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
+import { uploadFile } from '../fetchers/File';
 
 import './FileUploader.css';
 
 function Dropzone(props) {
-  const { onChange } = props;
+  const { onChange, id, reportId } = props;
   const onDrop = (e) => {
+    let attachmentType;
+    if (id === 'attachments') {
+      attachmentType = 'ATTACHMENT';
+    } else if (id === "other-resources") {
+      attachmentType = 'RESOURCE';
+    }
+    e.forEach( async (file) => {
+    try {
+      const data = new FormData()
+      data.append("reportId", reportId)
+      data.append("attachmentType", attachmentType)
+      data.append("file", file)
+      await uploadFile(data)
+    } catch (error) {
+      console.log(error)
+    }
+
+    });
+
     console.log(e)
     onChange(e);
   };
@@ -121,7 +142,7 @@ const FileTable = ({onFileRemoved, files}) => {
     </div>
   );
 }
-const FileUploader = ({ onChange, files }) => {
+const FileUploader = ({ onChange, files, reportId, id }) => {
   const onFilesAdded = (newFiles) => {
     onChange([...files, ...newFiles]);
   };
@@ -132,7 +153,7 @@ const FileUploader = ({ onChange, files }) => {
 
   return (
     <>
-      <Dropzone onChange={onFilesAdded} />
+      <Dropzone id={id} reportId={reportId} onChange={onFilesAdded} />
       <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 31389dca62..275d96f6c0 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -1,9 +1,16 @@
 import join from 'url-join';
-import { get, put, post } from './index';
+import { get } from './index';
 
 const activityReportUrl = join('/', 'api', 'files');
 
 export const uploadFile = async (data) => {
-  const res = await post(activityReportUrl, data);
-  return res.json();
+  const res = await fetch(activityReportUrl, {
+    method: 'POST',
+    credentials: 'same-origin',
+    body: data
+  });
+  if (!res.ok) {
+    throw new Error(res.statusText);
+  }
+  return res;
 };
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 11fb22fafb..2bc4cb9293 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -57,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="other-resources" />
           )}
         />
       </div>
@@ -70,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
+          <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>

From 1932a1b3dc3679522bbc2a285dcc4ed6e5b65f5d Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 14:43:03 -0500
Subject: [PATCH 04/35] Start adding front end styling for file upload

---
 frontend/src/components/FileUploader.css      | 14 ++++
 frontend/src/components/FileUploader.js       | 73 ++++++++++++-------
 frontend/src/components/Navigator/index.js    |  4 +-
 frontend/src/fetchers/File.js                 |  9 +++
 .../ActivityReport/Pages/topicsResources.js   |  8 +-
 frontend/src/pages/ActivityReport/index.js    |  1 +
 6 files changed, 77 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/fetchers/File.js

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index d14ce5f7ea..cf0e827586 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -23,3 +23,17 @@
 .fa-stack {
   width: 1em;
 }
+
+.files-table {
+  width: 100%;
+  border-collapse: collapse;
+  /* border: 1px solid #979797; */
+}
+
+/* .files-table--file-name {
+  width: 50%;
+} */
+
+.files-table td {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 6c68e5eb05..d4f78a6c8e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
 
 import './FileUploader.css';
@@ -18,6 +18,7 @@ import './FileUploader.css';
 function Dropzone(props) {
   const { onChange } = props;
   const onDrop = (e) => {
+    console.log(e)
     onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
@@ -37,30 +38,23 @@ function Dropzone(props) {
   };
 
   const textStyle = {
-    textAlign: 'center',
-    fontSize: '16px',
+    textAlign: 'left',
+    fontSize: '1.25rem',
+    backgroundColor: "#0166AB",
+    color: "white", 
+    padding: ".5rem",
+    borderRadius: "5px",
   };
 
-  const linkStyle = {
-    cursor: 'pointer',
-    color: 'blue',
-    textDecoration: 'underline',
-  };
 
   return (
     <div
       {...getRootProps()}
-      style={containerStyle}
     >
       <input {...getInputProps()} />
-      <p style={textStyle}>
-        <b>Drag and drop your files here</b>
-        {' '}
-        <br />
-        or
-        <br />
-        <span style={linkStyle}>Browse files</span>
-      </p>
+      <button className="usa-button">
+        Browse files
+      </button>
     </div>
   );
 }
@@ -81,13 +75,33 @@ const FileUploader = ({ onChange, files }) => {
   return (
     <>
       <Dropzone onChange={onFilesAdded} />
-      <Grid row gap className="margin-top-2">
+      <table row gap className="margin-top-2 files-table">
+        <thead bgcolor="#F8F8F8">
+        <th>
+          Name
+        </th>
+        <th>
+          Size
+        </th>
+        <th>
+          Status
+        </th>
+        <th>
+        </th>
+        </thead>
+        <tbody>
         {files.map((file, index) => (
-          <Grid key={file.name} col={6} className="margin-top-1">
-            <Tag className="smart-hub--file-tag">
-              <div className="smart-hub--file-tag-text">
-                {file.name}
-              </div>
+        <tr>
+            <td className="files-table--file-name">
+              {file.name}
+            </td>
+            <td>
+              {`${(file.size / 1000).toFixed(1) } KB`}
+            </td>
+            <td>
+              Uploaded
+            </td>
+          <td>
               <Button
                 role="button"
                 className="smart-hub--file-tag-button"
@@ -96,14 +110,17 @@ const FileUploader = ({ onChange, files }) => {
                 onClick={() => { onFileRemoved(index); }}
               >
                 <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="white" icon={faCircle} />
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTimes} />
+                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
                 </span>
               </Button>
-            </Tag>
-          </Grid>
+          </td>
+
+          </tr>
+
         ))}
-      </Grid>
+        </tbody>
+      </table>
+        
     </>
   );
 };
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 1b7f0c2650..9a5e59a53c 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -29,6 +29,7 @@ function Navigator({
   additionalData,
   onSave,
   autoSaveInterval,
+  reportId,
 }) {
   const [formData, updateFormData] = useState(initialData);
   const [errorMessage, updateErrorMessage] = useState();
@@ -131,6 +132,7 @@ function Navigator({
               submitted,
               onFormSubmit,
               additionalData,
+              reportId,
             )}
           {!page.review
             && (
@@ -142,7 +144,7 @@ function Navigator({
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
-                  {page.render(hookForm, additionalData)}
+                  {page.render(hookForm, additionalData, reportId)}
                   <Button type="submit" disabled={!isValid}>Continue</Button>
                 </Form>
               </Container>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
new file mode 100644
index 0000000000..31389dca62
--- /dev/null
+++ b/frontend/src/fetchers/File.js
@@ -0,0 +1,9 @@
+import join from 'url-join';
+import { get, put, post } from './index';
+
+const activityReportUrl = join('/', 'api', 'files');
+
+export const uploadFile = async (data) => {
+  const res = await post(activityReportUrl, data);
+  return res.json();
+};
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 86bc9df499..11fb22fafb 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -15,6 +15,7 @@ import { topics } from '../constants';
 const TopicsResources = ({
   register,
   control,
+  reportId,
 }) => (
   <>
     <Helmet>
@@ -56,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
           )}
         />
       </div>
@@ -69,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} id="attachments" />
+          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>
@@ -113,12 +114,13 @@ export default {
   path: 'topics-resources',
   sections,
   review: false,
-  render: (hookForm) => {
+  render: (hookForm, additionalData, reportId) => {
     const { control, register } = hookForm;
     return (
       <TopicsResources
         register={register}
         control={control}
+        reportId={reportId}
       />
     );
   },
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 28f471ad3d..a498320eaa 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -153,6 +153,7 @@ function ActivityReport({ match }) {
       <Helmet titleTemplate="%s - Activity Report - TTA Smart Hub" defaultTitle="TTA Smart Hub - Activity Report" />
       <h1 className="new-activity-report">New activity report for Region 14</h1>
       <Navigator
+        reportId={reportId.current}
         currentPage={currentPage}
         submitted={submitted}
         additionalData={initialAdditionalData}

From 877e423b3f03215e2717155f514d7efe692e4cd7 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 15:14:53 -0500
Subject: [PATCH 05/35] Style file upload

---
 frontend/src/components/FileUploader.css | 14 +++++--
 frontend/src/components/FileUploader.js  | 48 +++++++++++++++---------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index cf0e827586..90d6710490 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -30,10 +30,16 @@
   /* border: 1px solid #979797; */
 }
 
-/* .files-table--file-name {
-  width: 50%;
-} */
+.files-table--thead th, .files-table td {
+  padding: .5rem;
+  text-align: left;
+  font-size: .9rem;
+}
+.files-table--container {
+  border: solid 1px #979797;
+  min-height: 8rem;
+}
 
-.files-table td {
+.files-table--empty {
   text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index d4f78a6c8e..b5b78b199e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -63,30 +63,27 @@ Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const FileUploader = ({ onChange, files }) => {
-  const onFilesAdded = (newFiles) => {
-    onChange([...files, ...newFiles]);
-  };
-
-  const onFileRemoved = (removedFileIndex) => {
-    onChange(files.filter((f, index) => (index !== removedFileIndex)));
-  };
-
+const FileTable = ({onFileRemoved, files}) => {
+  let msg 
+  if (files.length === 0) {
+    msg = (
+      <p className="files-table--empty">No files uploaded</p>
+    )
+  }
   return (
-    <>
-      <Dropzone onChange={onFilesAdded} />
-      <table row gap className="margin-top-2 files-table">
-        <thead bgcolor="#F8F8F8">
-        <th>
+    <div className="files-table--container margin-top-2">
+      <table row gap className="files-table">
+        <thead className="files-table--thead" bgcolor="#F8F8F8">
+        <th width="50%">
           Name
         </th>
-        <th>
+        <th width="20%">
           Size
         </th>
-        <th>
+        <th width="20%">
           Status
         </th>
-        <th>
+        <th width="10%">
         </th>
         </thead>
         <tbody>
@@ -120,6 +117,23 @@ const FileUploader = ({ onChange, files }) => {
         ))}
         </tbody>
       </table>
+      { msg }
+    </div>
+  );
+}
+const FileUploader = ({ onChange, files }) => {
+  const onFilesAdded = (newFiles) => {
+    onChange([...files, ...newFiles]);
+  };
+
+  const onFileRemoved = (removedFileIndex) => {
+    onChange(files.filter((f, index) => (index !== removedFileIndex)));
+  };
+
+  return (
+    <>
+      <Dropzone onChange={onFilesAdded} />
+      <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
   );

From c7a7af21fa8db5f220aaae3140078719a8275297 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 16:26:31 -0500
Subject: [PATCH 06/35] enable file upload

---
 frontend/src/components/FileUploader.js       | 27 ++++++++++++++++---
 frontend/src/fetchers/File.js                 | 13 ++++++---
 .../ActivityReport/Pages/topicsResources.js   |  4 +--
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index b5b78b199e..3582f60de9 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -8,16 +8,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
+import * as FS from 'fs';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
+import { uploadFile } from '../fetchers/File';
 
 import './FileUploader.css';
 
 function Dropzone(props) {
-  const { onChange } = props;
+  const { onChange, id, reportId } = props;
   const onDrop = (e) => {
+    let attachmentType;
+    if (id === 'attachments') {
+      attachmentType = 'ATTACHMENT';
+    } else if (id === "other-resources") {
+      attachmentType = 'RESOURCE';
+    }
+    e.forEach( async (file) => {
+    try {
+      const data = new FormData()
+      data.append("reportId", reportId)
+      data.append("attachmentType", attachmentType)
+      data.append("file", file)
+      await uploadFile(data)
+    } catch (error) {
+      console.log(error)
+    }
+
+    });
+
     console.log(e)
     onChange(e);
   };
@@ -121,7 +142,7 @@ const FileTable = ({onFileRemoved, files}) => {
     </div>
   );
 }
-const FileUploader = ({ onChange, files }) => {
+const FileUploader = ({ onChange, files, reportId, id }) => {
   const onFilesAdded = (newFiles) => {
     onChange([...files, ...newFiles]);
   };
@@ -132,7 +153,7 @@ const FileUploader = ({ onChange, files }) => {
 
   return (
     <>
-      <Dropzone onChange={onFilesAdded} />
+      <Dropzone id={id} reportId={reportId} onChange={onFilesAdded} />
       <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 31389dca62..275d96f6c0 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -1,9 +1,16 @@
 import join from 'url-join';
-import { get, put, post } from './index';
+import { get } from './index';
 
 const activityReportUrl = join('/', 'api', 'files');
 
 export const uploadFile = async (data) => {
-  const res = await post(activityReportUrl, data);
-  return res.json();
+  const res = await fetch(activityReportUrl, {
+    method: 'POST',
+    credentials: 'same-origin',
+    body: data
+  });
+  if (!res.ok) {
+    throw new Error(res.statusText);
+  }
+  return res;
 };
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 11fb22fafb..2bc4cb9293 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -57,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="other-resources" />
           )}
         />
       </div>
@@ -70,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
+          <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>

From 84a97a6bb2498ef1cfc59d6475f8aacc8ccff7e5 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 16:52:33 -0500
Subject: [PATCH 07/35] fmt

---
 frontend/src/components/FileUploader.js | 84 +++++++++----------------
 1 file changed, 29 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 3582f60de9..bb27f886bb 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -8,11 +8,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
-import * as FS from 'fs';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Tag, Button, Grid } from '@trussworks/react-uswds';
+import {  Button } from '@trussworks/react-uswds';
 import { uploadFile } from '../fetchers/File';
 
 import './FileUploader.css';
@@ -23,57 +21,31 @@ function Dropzone(props) {
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
-    } else if (id === "other-resources") {
+    } else if (id === 'other-resources') {
       attachmentType = 'RESOURCE';
     }
     e.forEach( async (file) => {
-    try {
-      const data = new FormData()
-      data.append("reportId", reportId)
-      data.append("attachmentType", attachmentType)
-      data.append("file", file)
-      await uploadFile(data)
-    } catch (error) {
-      console.log(error)
-    }
-
+      try {
+        const data = new FormData();
+        data.append('reportId', reportId);
+        data.append('attachmentType', attachmentType);
+        data.append('file', file)
+        await uploadFile(data)
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
     });
-
-    console.log(e)
     onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
-  // I tried moving these styles to a css file and applying a class to the container
-  // and span. The styles were not being applied, it seems like the Dropzone library
-  // is messing with the styles somewhere
-  const containerStyle = {
-    maxWidth: '21rem',
-    height: '8rem',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderStyle: 'dashed',
-    borderWidth: '0.125rem',
-    borderColor: '#979797',
-  };
-
-  const textStyle = {
-    textAlign: 'left',
-    fontSize: '1.25rem',
-    backgroundColor: "#0166AB",
-    color: "white", 
-    padding: ".5rem",
-    borderRadius: "5px",
-  };
-
-
   return (
     <div
       {...getRootProps()}
     >
       <input {...getInputProps()} />
-      <button className="usa-button">
+      <button className='usa-button'>
         Browse files
       </button>
     </div>
@@ -82,35 +54,37 @@ function Dropzone(props) {
 
 Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
+  reportId: PropTypes.any.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 const FileTable = ({onFileRemoved, files}) => {
   let msg 
   if (files.length === 0) {
     msg = (
-      <p className="files-table--empty">No files uploaded</p>
+      <p className='files-table--empty'>No files uploaded</p>
     )
   }
   return (
-    <div className="files-table--container margin-top-2">
-      <table row gap className="files-table">
-        <thead className="files-table--thead" bgcolor="#F8F8F8">
-        <th width="50%">
+    <div className='files-table--container margin-top-2'>
+      <table row gap className='files-table'>
+        <thead className='files-table--thead' bgcolor='#F8F8F8'>
+        <th width='50%'>
           Name
         </th>
-        <th width="20%">
+        <th width='20%'>
           Size
         </th>
-        <th width="20%">
+        <th width='20%'>
           Status
         </th>
-        <th width="10%">
+        <th width='10%'>
         </th>
         </thead>
         <tbody>
         {files.map((file, index) => (
         <tr>
-            <td className="files-table--file-name">
+            <td className='files-table--file-name'>
               {file.name}
             </td>
             <td>
@@ -121,14 +95,14 @@ const FileTable = ({onFileRemoved, files}) => {
             </td>
           <td>
               <Button
-                role="button"
-                className="smart-hub--file-tag-button"
+                role='button'
+                className='smart-hub--file-tag-button'
                 unstyled
-                aria-label="remove file"
+                aria-label='remove file'
                 onClick={() => { onFileRemoved(index); }}
               >
-                <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                <span className='fa-stack fa-sm'>
+                  <FontAwesomeIcon className='fa-stack-1x' color='black' icon={faTrash} />
                 </span>
               </Button>
           </td>

From 9a3f9f502ebc12a157da68cf1fa710cc27f77c9f Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 17:25:17 -0500
Subject: [PATCH 08/35] fmt

---
 frontend/src/components/FileUploader.js       | 118 ++++++++++--------
 frontend/src/components/Navigator/index.js    |   1 +
 frontend/src/fetchers/File.js                 |   7 +-
 .../ActivityReport/Pages/topicsResources.js   |   1 +
 4 files changed, 69 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index bb27f886bb..8c7deab3cf 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import {  Button } from '@trussworks/react-uswds';
-import { uploadFile } from '../fetchers/File';
+import { Button } from '@trussworks/react-uswds';
+import uploadFile from '../fetchers/File';
 
 import './FileUploader.css';
 
@@ -24,13 +24,13 @@ function Dropzone(props) {
     } else if (id === 'other-resources') {
       attachmentType = 'RESOURCE';
     }
-    e.forEach( async (file) => {
+    e.forEach(async (file) => {
       try {
         const data = new FormData();
         data.append('reportId', reportId);
         data.append('attachmentType', attachmentType);
-        data.append('file', file)
-        await uploadFile(data)
+        data.append('file', file);
+        await uploadFile(data);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -45,7 +45,7 @@ function Dropzone(props) {
       {...getRootProps()}
     >
       <input {...getInputProps()} />
-      <button className='usa-button'>
+      <button type="button" className="usa-button">
         Browse files
       </button>
     </div>
@@ -54,69 +54,77 @@ function Dropzone(props) {
 
 Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
-  reportId: PropTypes.any.isRequired,
+  reportId: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
 };
 
-const FileTable = ({onFileRemoved, files}) => {
-  let msg 
+const FileTable = ({ onFileRemoved, files }) => {
+  let msg;
   if (files.length === 0) {
     msg = (
-      <p className='files-table--empty'>No files uploaded</p>
-    )
+      <p className="files-table--empty">No files uploaded</p>
+    );
   }
   return (
-    <div className='files-table--container margin-top-2'>
-      <table row gap className='files-table'>
-        <thead className='files-table--thead' bgcolor='#F8F8F8'>
-        <th width='50%'>
-          Name
-        </th>
-        <th width='20%'>
-          Size
-        </th>
-        <th width='20%'>
-          Status
-        </th>
-        <th width='10%'>
-        </th>
+    <div className="files-table--container margin-top-2">
+      <table row gap className="files-table">
+        <thead className="files-table--thead" bgcolor="#F8F8F8">
+          <th width="50%">
+            Name
+          </th>
+          <th width="20%">
+            Size
+          </th>
+          <th width="20%">
+            Status
+          </th>
+          <th width="10%" aria-label="remove file" />
         </thead>
         <tbody>
-        {files.map((file, index) => (
-        <tr>
-            <td className='files-table--file-name'>
-              {file.name}
-            </td>
-            <td>
-              {`${(file.size / 1000).toFixed(1) } KB`}
-            </td>
-            <td>
-              Uploaded
-            </td>
-          <td>
-              <Button
-                role='button'
-                className='smart-hub--file-tag-button'
-                unstyled
-                aria-label='remove file'
-                onClick={() => { onFileRemoved(index); }}
-              >
-                <span className='fa-stack fa-sm'>
-                  <FontAwesomeIcon className='fa-stack-1x' color='black' icon={faTrash} />
-                </span>
-              </Button>
-          </td>
+          {files.map((file, index) => (
+            <tr>
+              <td className="files-table--file-name">
+                {file.name}
+              </td>
+              <td>
+                {`${(file.size / 1000).toFixed(1)} KB`}
+              </td>
+              <td>
+                Uploaded
+              </td>
+              <td>
+                <Button
+                  role="button"
+                  className="smart-hub--file-tag-button"
+                  unstyled
+                  aria-label="remove file"
+                  onClick={() => { onFileRemoved(index); }}
+                >
+                  <span className="fa-stack fa-sm">
+                    <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                  </span>
+                </Button>
+              </td>
 
-          </tr>
+            </tr>
 
-        ))}
+          ))}
         </tbody>
       </table>
       { msg }
     </div>
   );
-}
-const FileUploader = ({ onChange, files, reportId, id }) => {
+};
+FileTable.propTypes = {
+  onFileRemoved: PropTypes.func.isRequired,
+  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+};
+FileTable.defaultProps = {
+  files: [],
+};
+const FileUploader = ({
+  onChange, files, reportId, id,
+}) => {
   const onFilesAdded = (newFiles) => {
     onChange([...files, ...newFiles]);
   };
@@ -129,7 +137,7 @@ const FileUploader = ({ onChange, files, reportId, id }) => {
     <>
       <Dropzone id={id} reportId={reportId} onChange={onFilesAdded} />
       <FileTable onFileRemoved={onFileRemoved} files={files} />
-        
+
     </>
   );
 };
@@ -137,6 +145,8 @@ const FileUploader = ({ onChange, files, reportId, id }) => {
 FileUploader.propTypes = {
   onChange: PropTypes.func.isRequired,
   files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  reportId: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 FileUploader.defaultProps = {
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 9a5e59a53c..a0cf8a44b0 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -172,6 +172,7 @@ Navigator.propTypes = {
   currentPage: PropTypes.string.isRequired,
   autoSaveInterval: PropTypes.number,
   additionalData: PropTypes.shape({}),
+  reportId: PropTypes.node.isRequired,
 };
 
 Navigator.defaultProps = {
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 275d96f6c0..a1a2f176b4 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -1,16 +1,15 @@
 import join from 'url-join';
-import { get } from './index';
 
 const activityReportUrl = join('/', 'api', 'files');
 
-export const uploadFile = async (data) => {
+export default async function uploadFile(data) {
   const res = await fetch(activityReportUrl, {
     method: 'POST',
     credentials: 'same-origin',
-    body: data
+    body: data,
   });
   if (!res.ok) {
     throw new Error(res.statusText);
   }
   return res;
-};
\ No newline at end of file
+}
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 2bc4cb9293..994aacccd1 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -81,6 +81,7 @@ TopicsResources.propTypes = {
   register: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   control: PropTypes.object.isRequired,
+  reportId: PropTypes.node.isRequired,
 };
 
 const sections = [

From 8a83029734c685dac555ccee4c1dd4971c8c1281 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Fri, 29 Jan 2021 09:27:29 -0500
Subject: [PATCH 09/35] fix tests

---
 frontend/src/components/FileUploader.js           |  7 +++++--
 frontend/src/components/__tests__/FileUploader.js | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 8c7deab3cf..a6a027e66a 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -67,8 +67,9 @@ const FileTable = ({ onFileRemoved, files }) => {
   }
   return (
     <div className="files-table--container margin-top-2">
-      <table row gap className="files-table">
+      <table className="files-table">
         <thead className="files-table--thead" bgcolor="#F8F8F8">
+          <tr>
           <th width="50%">
             Name
           </th>
@@ -79,10 +80,12 @@ const FileTable = ({ onFileRemoved, files }) => {
             Status
           </th>
           <th width="10%" aria-label="remove file" />
+
+          </tr>
         </thead>
         <tbody>
           {files.map((file, index) => (
-            <tr>
+            <tr id={`files-table-row-${index}`}>
               <td className="files-table--file-name">
                 {file.name}
               </td>
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index e9f3ca4fc6..7498fba101 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -34,7 +34,7 @@ describe('FileUploader', () => {
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
     const data = mockData([file('file')]);
-    const ui = <FileUploader onChange={mockOnChange} files={[]} />;
+    const ui = <FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[]} />;
     const { container, rerender } = render(ui);
     const dropzone = container.querySelector('div');
 
@@ -45,16 +45,17 @@ describe('FileUploader', () => {
   });
 
   it('files are properly displayed', () => {
-    render(<FileUploader onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment"  onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
     expect(screen.getByText('fileOne')).toBeVisible();
     expect(screen.getByText('fileTwo')).toBeVisible();
   });
 
   it('files can be removed', () => {
     const mockOnChange = jest.fn();
-    render(<FileUploader onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
-    const fileOne = screen.getByText('fileOne');
-    fireEvent.click(fileOne.nextSibling);
+    render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
+    const fileTwo = screen.getByText('fileTwo');
+    console.log(fileTwo.parentNode.lastChild.firstChild)
+    fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
     expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
   });

From 68ba4c053b14bef566fd9e9ef5ca906d3978e570 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Fri, 29 Jan 2021 17:10:16 -0500
Subject: [PATCH 10/35] update so attached files display

---
 frontend/src/components/FileUploader.js       | 12 +++++------
 .../src/components/__tests__/FileUploader.js  |  4 ++--
 .../ActivityReport/Pages/topicsResources.js   |  8 +++----
 .../20210129210854-add-fileSize-to-files.js   | 14 +++++++++++++
 src/models/activityReport.js                  |  3 ++-
 src/models/file.js                            |  4 ++++
 src/routes/files/handlers.js                  | 15 +++++++++++--
 src/routes/files/handlers.test.js             | 10 +++++++++
 src/services/activityReports.js               | 21 ++++++++++++++++++-
 9 files changed, 75 insertions(+), 16 deletions(-)
 create mode 100644 src/migrations/20210129210854-add-fileSize-to-files.js

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index a6a027e66a..0cb3433e8a 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -21,7 +21,7 @@ function Dropzone(props) {
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
-    } else if (id === 'other-resources') {
+    } else if (id === 'otherResources') {
       attachmentType = 'RESOURCE';
     }
     e.forEach(async (file) => {
@@ -31,12 +31,12 @@ function Dropzone(props) {
         data.append('attachmentType', attachmentType);
         data.append('file', file);
         await uploadFile(data);
+        onChange([{originalFileName: file.name, fileSize: file.size, status: "Uploaded"}])
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
       }
     });
-    onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
@@ -87,13 +87,13 @@ const FileTable = ({ onFileRemoved, files }) => {
           {files.map((file, index) => (
             <tr id={`files-table-row-${index}`}>
               <td className="files-table--file-name">
-                {file.name}
+                {file.originalFileName}
               </td>
               <td>
-                {`${(file.size / 1000).toFixed(1)} KB`}
+                {`${(file.fileSize / 1000).toFixed(1)} KB`}
               </td>
               <td>
-                Uploaded
+                {file.status}
               </td>
               <td>
                 <Button
@@ -147,7 +147,7 @@ const FileUploader = ({
 
 FileUploader.propTypes = {
   onChange: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  files: PropTypes.arrayOf(PropTypes.object),
   reportId: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
 };
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index 7498fba101..bfc71ae6e2 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -29,7 +29,7 @@ describe('FileUploader', () => {
     },
   });
 
-  const file = (name) => new File([''], name, { type: 'text/html' });
+  const file = (name) => { return {originalFileName: name, fileSize: 2000, status: "Uploaded"}};
 
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
@@ -54,7 +54,7 @@ describe('FileUploader', () => {
     const mockOnChange = jest.fn();
     render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
     const fileTwo = screen.getByText('fileTwo');
-    console.log(fileTwo.parentNode.lastChild.firstChild)
+    console.log(fileTwo.parentNode)
     fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
     expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 994aacccd1..f37f74e543 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -51,13 +51,13 @@ const TopicsResources = ({
         />
       </div>
       <div className="smart-hub--form-section">
-        <Label htmlFor="other-resources">Upload any resources used that are not available through ECLKC</Label>
+        <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
         <Controller
-          name="other-resources"
+          name="otherResources"
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="otherResources" />
           )}
         />
       </div>
@@ -97,7 +97,7 @@ const sections = [
     anchor: 'resources',
     items: [
       { label: 'Resources used', name: 'resourcesUsed' },
-      { label: 'Other resources', name: 'other-resources', path: 'name' },
+      { label: 'Other resources', name: 'otherResources', path: 'name' },
     ],
   },
   {
diff --git a/src/migrations/20210129210854-add-fileSize-to-files.js b/src/migrations/20210129210854-add-fileSize-to-files.js
new file mode 100644
index 0000000000..0c8449ca72
--- /dev/null
+++ b/src/migrations/20210129210854-add-fileSize-to-files.js
@@ -0,0 +1,14 @@
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('Files',
+      'fileSize',
+      {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+      });
+  },
+
+  down: async (queryInterface) => {
+    await queryInterface.removeColumn('Files', 'fileSize');
+  },
+};
diff --git a/src/models/activityReport.js b/src/models/activityReport.js
index 0c00b30f69..9725a22eea 100644
--- a/src/models/activityReport.js
+++ b/src/models/activityReport.js
@@ -26,7 +26,8 @@ export default (sequelize, DataTypes) => {
         as: 'collaborators',
       });
       ActivityReport.belongsTo(models.Region, { foreignKey: 'regionId', as: 'region' });
-      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'activityFiles' });
+      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'attachments' });
+      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'otherResources' });
     }
   }
   ActivityReport.init({
diff --git a/src/models/file.js b/src/models/file.js
index 109e8939a7..a105396655 100644
--- a/src/models/file.js
+++ b/src/models/file.js
@@ -32,6 +32,10 @@ module.exports = (sequelize, DataTypes) => {
       type: DataTypes.ENUM('ATTACHMENT', 'RESOURCE'),
       allowNull: false,
     },
+    fileSize: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+    },
   }, {
     sequelize,
     modelName: 'File',
diff --git a/src/routes/files/handlers.js b/src/routes/files/handlers.js
index b3a12a1c2b..8927102dd7 100644
--- a/src/routes/files/handlers.js
+++ b/src/routes/files/handlers.js
@@ -21,6 +21,7 @@ export const createFileMetaData = async (
   s3FileName,
   reportId,
   attachmentType,
+  fileSize,
 ) => {
   const newFile = {
     activityReportId: reportId,
@@ -28,6 +29,7 @@ export const createFileMetaData = async (
     attachmentType,
     key: s3FileName,
     status: 'UPLOADING',
+    fileSize,
   };
   let file;
   try {
@@ -64,8 +66,11 @@ export default async function uploadHandler(req, res) {
         res.status(400).send({ error: 'file required' });
         return;
       }
-      const { path, originalFilename } = files.file[0];
+      const { path, originalFilename, size } = files.file[0];
       const { reportId, attachmentType } = fields;
+      if (!size) {
+        res.status(400).send({ error: 'improper file size' });
+      }
       if (!reportId) {
         res.status(400).send({ error: 'reportId required' });
         return;
@@ -85,7 +90,13 @@ export default async function uploadHandler(req, res) {
         return;
       }
       fileName = `${uuidv4()}.${type.ext}`;
-      metadata = await createFileMetaData(originalFilename, fileName, reportId, attachmentType[0]);
+      metadata = await createFileMetaData(
+        originalFilename,
+        fileName,
+        reportId,
+        attachmentType[0],
+        size,
+      );
     } catch (err) {
       await handleErrors(req, res, err, logContext);
       return;
diff --git a/src/routes/files/handlers.test.js b/src/routes/files/handlers.test.js
index 54c09134ff..62ae2d1b76 100644
--- a/src/routes/files/handlers.test.js
+++ b/src/routes/files/handlers.test.js
@@ -89,6 +89,16 @@ describe('File Upload', () => {
       expect(file.dataValues.activityReportId).toBe(report.dataValues.id);
       expect(validate(uuid)).toBe(true);
     });
+    // it('checks that we get the proper data back', async ()  => {
+    //   let fileObject;
+    //   await request(app)
+    //     .get(`/api/files/${report.dataValues.id}`)
+    //     .expect(200)
+    //     .then((res) => {
+    //       fileObject = res.body[0];
+    //     });
+    //     const {id, activityReportId, }
+    // });
   });
 
   describe('File Upload Handlers error handling', () => {
diff --git a/src/services/activityReports.js b/src/services/activityReports.js
index 9e601fcd67..cc94db2aa2 100644
--- a/src/services/activityReports.js
+++ b/src/services/activityReports.js
@@ -6,6 +6,7 @@ import {
   ActivityReportCollaborator,
   sequelize,
   ActivityRecipient,
+  File,
   Grant,
   Grantee,
   NonGrantee,
@@ -144,13 +145,31 @@ export function activityReportById(activityReportId) {
         attributes: ['id', 'name'],
         as: 'collaborators',
       },
+      {
+        model: File,
+        where: { attachmentType: 'ATTACHMENT' },
+        as: 'attachments',
+        required: false,
+      },
+      {
+        model: File,
+        where: { attachmentType: 'RESOURCE' },
+        as: 'otherResources',
+        required: false,
+      },
     ],
   });
 }
 
 export async function createOrUpdate(newActivityReport, report) {
   let savedReport;
-  const { collaborators, activityRecipients, ...updatedFields } = newActivityReport;
+  const {
+    collaborators,
+    activityRecipients,
+    attachments,
+    otherResources,
+    ...updatedFields
+  } = newActivityReport;
   await sequelize.transaction(async (transaction) => {
     if (report) {
       savedReport = await update(updatedFields, report, transaction);

From b62acea0af6b9b4f1658ecceeedab9dc87cbc1e4 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 15:21:32 -0500
Subject: [PATCH 11/35] fix tests

---
 frontend/src/components/FileUploader.js       | 24 +++++++++----------
 .../src/components/__tests__/FileUploader.js  | 13 +++++-----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 0cb3433e8a..fb513a0135 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -31,7 +31,7 @@ function Dropzone(props) {
         data.append('attachmentType', attachmentType);
         data.append('file', file);
         await uploadFile(data);
-        onChange([{originalFileName: file.name, fileSize: file.size, status: "Uploaded"}])
+        onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -70,16 +70,16 @@ const FileTable = ({ onFileRemoved, files }) => {
       <table className="files-table">
         <thead className="files-table--thead" bgcolor="#F8F8F8">
           <tr>
-          <th width="50%">
-            Name
-          </th>
-          <th width="20%">
-            Size
-          </th>
-          <th width="20%">
-            Status
-          </th>
-          <th width="10%" aria-label="remove file" />
+            <th width="50%">
+              Name
+            </th>
+            <th width="20%">
+              Size
+            </th>
+            <th width="20%">
+              Status
+            </th>
+            <th width="10%" aria-label="remove file" />
 
           </tr>
         </thead>
@@ -120,7 +120,7 @@ const FileTable = ({ onFileRemoved, files }) => {
 };
 FileTable.propTypes = {
   onFileRemoved: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  files: PropTypes.arrayOf(PropTypes.object),
 };
 FileTable.defaultProps = {
   files: [],
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index bfc71ae6e2..71931028de 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -3,10 +3,12 @@ import React from 'react';
 import {
   render, fireEvent, waitFor, act, screen,
 } from '@testing-library/react';
+import * as fileFetcher from '../../fetchers/File';
 
 import FileUploader from '../FileUploader';
 
 describe('FileUploader', () => {
+  jest.spyOn(fileFetcher, 'default').mockImplementation(() => Promise.resolve());
   const dispatchEvt = (node, type, data) => {
     const event = new Event(type, { bubbles: true });
     Object.assign(event, data);
@@ -29,7 +31,7 @@ describe('FileUploader', () => {
     },
   });
 
-  const file = (name) => { return {originalFileName: name, fileSize: 2000, status: "Uploaded"}};
+  const file = (name) => ({ originalFileName: name, fileSize: 2000, status: 'Uploaded' });
 
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
@@ -38,25 +40,24 @@ describe('FileUploader', () => {
     const { container, rerender } = render(ui);
     const dropzone = container.querySelector('div');
 
-    dispatchEvt(dropzone, 'drop', data);
+    await dispatchEvt(dropzone, 'drop', data);
     await flushPromises(rerender, ui);
 
     expect(mockOnChange).toHaveBeenCalled();
   });
 
   it('files are properly displayed', () => {
-    render(<FileUploader reportId="new" id="attachment"  onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment" onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
     expect(screen.getByText('fileOne')).toBeVisible();
     expect(screen.getByText('fileTwo')).toBeVisible();
   });
 
   it('files can be removed', () => {
     const mockOnChange = jest.fn();
-    render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
     const fileTwo = screen.getByText('fileTwo');
-    console.log(fileTwo.parentNode)
     fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
-    expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
+    expect(mockOnChange).toHaveBeenCalledWith([file('fileOne')]);
   });
 });

From a6c6ae275cec0e1489895ec6c0374cce9c926c4f Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:04:25 -0500
Subject: [PATCH 12/35] add error message on failed upload

---
 frontend/src/components/FileUploader.js | 12 ++++++++++--
 src/services/activityReports.js         | 14 ++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index fb513a0135..0834c9b874 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -5,18 +5,19 @@
 // react-dropzone examples all use prop spreading. Disabling the eslint no prop spreading
 // rules https://github.com/react-dropzone/react-dropzone
 /* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@trussworks/react-uswds';
+import { Button, Alert } from '@trussworks/react-uswds';
 import uploadFile from '../fetchers/File';
 
 import './FileUploader.css';
 
 function Dropzone(props) {
   const { onChange, id, reportId } = props;
+  const [errorMessage, setErrorMessage] = useState();
   const onDrop = (e) => {
     let attachmentType;
     if (id === 'attachments') {
@@ -34,6 +35,7 @@ function Dropzone(props) {
         onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
         // eslint-disable-next-line no-console
+        setErrorMessage(`${file.name} failed to upload`)
         console.log(error);
       }
     });
@@ -48,6 +50,12 @@ function Dropzone(props) {
       <button type="button" className="usa-button">
         Browse files
       </button>
+       {errorMessage
+        && (
+          <Alert type="error" slim noIcon className="smart-hub--save-alert">
+            {errorMessage}
+          </Alert>
+        )}
     </div>
   );
 }
diff --git a/src/services/activityReports.js b/src/services/activityReports.js
index cc94db2aa2..9eaa832aaf 100644
--- a/src/services/activityReports.js
+++ b/src/services/activityReports.js
@@ -147,13 +147,23 @@ export function activityReportById(activityReportId) {
       },
       {
         model: File,
-        where: { attachmentType: 'ATTACHMENT' },
+        where: {
+          attachmentType: 'ATTACHMENT',
+          status: {
+            [Op.ne]: 'UPLOAD_FAILED',
+          },
+        },
         as: 'attachments',
         required: false,
       },
       {
         model: File,
-        where: { attachmentType: 'RESOURCE' },
+        where: {
+          attachmentType: 'RESOURCE',
+          status: {
+            [Op.ne]: 'UPLOAD_FAILED',
+          },
+        },
         as: 'otherResources',
         required: false,
       },

From e459aab2be8e270a921befb8fb0e5fde078a301c Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:21:52 -0500
Subject: [PATCH 13/35] fmt

---
 frontend/src/components/FileUploader.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 0834c9b874..5b3d102306 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -34,8 +34,8 @@ function Dropzone(props) {
         await uploadFile(data);
         onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
+        setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console
-        setErrorMessage(`${file.name} failed to upload`)
         console.log(error);
       }
     });
@@ -50,7 +50,7 @@ function Dropzone(props) {
       <button type="button" className="usa-button">
         Browse files
       </button>
-       {errorMessage
+      {errorMessage
         && (
           <Alert type="error" slim noIcon className="smart-hub--save-alert">
             {errorMessage}

From 4ea7397773d71d441537d9c1c69e0edd15dc2bb1 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:30:14 -0500
Subject: [PATCH 14/35] update FileUploader.js

---
 frontend/src/components/FileUploader.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 5b3d102306..64f3920db7 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -67,12 +67,6 @@ Dropzone.propTypes = {
 };
 
 const FileTable = ({ onFileRemoved, files }) => {
-  let msg;
-  if (files.length === 0) {
-    msg = (
-      <p className="files-table--empty">No files uploaded</p>
-    );
-  }
   return (
     <div className="files-table--container margin-top-2">
       <table className="files-table">
@@ -122,7 +116,9 @@ const FileTable = ({ onFileRemoved, files }) => {
           ))}
         </tbody>
       </table>
-      { msg }
+      { files.length === 0 && (
+      <p className="files-table--empty">No files uploaded</p>
+      )}
     </div>
   );
 };

From aa2fd93da1f35cb3cd5212b5ffc067517dd071d9 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:32:46 -0500
Subject: [PATCH 15/35] fmt

---
 frontend/src/components/FileUploader.js | 102 ++++++++++++------------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 64f3920db7..1dd52e8110 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -66,62 +66,60 @@ Dropzone.propTypes = {
   id: PropTypes.string.isRequired,
 };
 
-const FileTable = ({ onFileRemoved, files }) => {
-  return (
-    <div className="files-table--container margin-top-2">
-      <table className="files-table">
-        <thead className="files-table--thead" bgcolor="#F8F8F8">
-          <tr>
-            <th width="50%">
-              Name
-            </th>
-            <th width="20%">
-              Size
-            </th>
-            <th width="20%">
-              Status
-            </th>
-            <th width="10%" aria-label="remove file" />
+const FileTable = ({ onFileRemoved, files }) => (
+  <div className="files-table--container margin-top-2">
+    <table className="files-table">
+      <thead className="files-table--thead" bgcolor="#F8F8F8">
+        <tr>
+          <th width="50%">
+            Name
+          </th>
+          <th width="20%">
+            Size
+          </th>
+          <th width="20%">
+            Status
+          </th>
+          <th width="10%" aria-label="remove file" />
 
-          </tr>
-        </thead>
-        <tbody>
-          {files.map((file, index) => (
-            <tr id={`files-table-row-${index}`}>
-              <td className="files-table--file-name">
-                {file.originalFileName}
-              </td>
-              <td>
-                {`${(file.fileSize / 1000).toFixed(1)} KB`}
-              </td>
-              <td>
-                {file.status}
-              </td>
-              <td>
-                <Button
-                  role="button"
-                  className="smart-hub--file-tag-button"
-                  unstyled
-                  aria-label="remove file"
-                  onClick={() => { onFileRemoved(index); }}
-                >
-                  <span className="fa-stack fa-sm">
-                    <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
-                  </span>
-                </Button>
-              </td>
+        </tr>
+      </thead>
+      <tbody>
+        {files.map((file, index) => (
+          <tr id={`files-table-row-${index}`}>
+            <td className="files-table--file-name">
+              {file.originalFileName}
+            </td>
+            <td>
+              {`${(file.fileSize / 1000).toFixed(1)} KB`}
+            </td>
+            <td>
+              {file.status}
+            </td>
+            <td>
+              <Button
+                role="button"
+                className="smart-hub--file-tag-button"
+                unstyled
+                aria-label="remove file"
+                onClick={() => { onFileRemoved(index); }}
+              >
+                <span className="fa-stack fa-sm">
+                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                </span>
+              </Button>
+            </td>
 
-            </tr>
+          </tr>
 
-          ))}
-        </tbody>
-      </table>
-      { files.length === 0 && (
+        ))}
+      </tbody>
+    </table>
+    { files.length === 0 && (
       <p className="files-table--empty">No files uploaded</p>
-      )}
-    </div>
-  );
-};
+    )}
+  </div>
+);
 FileTable.propTypes = {
   onFileRemoved: PropTypes.func.isRequired,
   files: PropTypes.arrayOf(PropTypes.object),

From 40b43cf187b909bfe910a38c6bbd2eee1d3d138f Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 17:18:23 -0500
Subject: [PATCH 16/35] add frontend/fetchers/file.js tests

---
 frontend/src/fetchers/__tests__/File.js | 14 ++++++++++++++
 src/routes/files/handlers.test.js       | 10 ----------
 2 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/fetchers/__tests__/File.js

diff --git a/frontend/src/fetchers/__tests__/File.js b/frontend/src/fetchers/__tests__/File.js
new file mode 100644
index 0000000000..65767d18f9
--- /dev/null
+++ b/frontend/src/fetchers/__tests__/File.js
@@ -0,0 +1,14 @@
+import fetchMock from 'fetch-mock';
+import join from 'url-join';
+import uploadFile from '../File';
+
+const activityReportUrl = join('/', 'api', 'files');
+const fakeFile = new File(['testing'], 'test.txt');
+
+describe('File fetcher', () => {
+  it('test that the file gets uploaded', async () => {
+    fetchMock.mock(activityReportUrl, 200);
+    const res = await uploadFile(fakeFile);
+    expect(res.status).toBe(200);
+  });
+});
diff --git a/src/routes/files/handlers.test.js b/src/routes/files/handlers.test.js
index 62ae2d1b76..54c09134ff 100644
--- a/src/routes/files/handlers.test.js
+++ b/src/routes/files/handlers.test.js
@@ -89,16 +89,6 @@ describe('File Upload', () => {
       expect(file.dataValues.activityReportId).toBe(report.dataValues.id);
       expect(validate(uuid)).toBe(true);
     });
-    // it('checks that we get the proper data back', async ()  => {
-    //   let fileObject;
-    //   await request(app)
-    //     .get(`/api/files/${report.dataValues.id}`)
-    //     .expect(200)
-    //     .then((res) => {
-    //       fileObject = res.body[0];
-    //     });
-    //     const {id, activityReportId, }
-    // });
   });
 
   describe('File Upload Handlers error handling', () => {

From b5e098e8b2cbd7062e0eca545a597ee137024340 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 14:43:03 -0500
Subject: [PATCH 17/35] Start adding front end styling for file upload

---
 frontend/src/components/FileUploader.css      | 14 ++++
 frontend/src/components/FileUploader.js       | 73 ++++++++++++-------
 frontend/src/components/Navigator/index.js    |  4 +-
 frontend/src/fetchers/File.js                 |  9 +++
 .../ActivityReport/Pages/topicsResources.js   |  8 +-
 frontend/src/pages/ActivityReport/index.js    |  1 +
 6 files changed, 77 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/fetchers/File.js

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index d14ce5f7ea..cf0e827586 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -23,3 +23,17 @@
 .fa-stack {
   width: 1em;
 }
+
+.files-table {
+  width: 100%;
+  border-collapse: collapse;
+  /* border: 1px solid #979797; */
+}
+
+/* .files-table--file-name {
+  width: 50%;
+} */
+
+.files-table td {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 6c68e5eb05..d4f78a6c8e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes, faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
 
 import './FileUploader.css';
@@ -18,6 +18,7 @@ import './FileUploader.css';
 function Dropzone(props) {
   const { onChange } = props;
   const onDrop = (e) => {
+    console.log(e)
     onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
@@ -37,30 +38,23 @@ function Dropzone(props) {
   };
 
   const textStyle = {
-    textAlign: 'center',
-    fontSize: '16px',
+    textAlign: 'left',
+    fontSize: '1.25rem',
+    backgroundColor: "#0166AB",
+    color: "white", 
+    padding: ".5rem",
+    borderRadius: "5px",
   };
 
-  const linkStyle = {
-    cursor: 'pointer',
-    color: 'blue',
-    textDecoration: 'underline',
-  };
 
   return (
     <div
       {...getRootProps()}
-      style={containerStyle}
     >
       <input {...getInputProps()} />
-      <p style={textStyle}>
-        <b>Drag and drop your files here</b>
-        {' '}
-        <br />
-        or
-        <br />
-        <span style={linkStyle}>Browse files</span>
-      </p>
+      <button className="usa-button">
+        Browse files
+      </button>
     </div>
   );
 }
@@ -81,13 +75,33 @@ const FileUploader = ({ onChange, files }) => {
   return (
     <>
       <Dropzone onChange={onFilesAdded} />
-      <Grid row gap className="margin-top-2">
+      <table row gap className="margin-top-2 files-table">
+        <thead bgcolor="#F8F8F8">
+        <th>
+          Name
+        </th>
+        <th>
+          Size
+        </th>
+        <th>
+          Status
+        </th>
+        <th>
+        </th>
+        </thead>
+        <tbody>
         {files.map((file, index) => (
-          <Grid key={file.name} col={6} className="margin-top-1">
-            <Tag className="smart-hub--file-tag">
-              <div className="smart-hub--file-tag-text">
-                {file.name}
-              </div>
+        <tr>
+            <td className="files-table--file-name">
+              {file.name}
+            </td>
+            <td>
+              {`${(file.size / 1000).toFixed(1) } KB`}
+            </td>
+            <td>
+              Uploaded
+            </td>
+          <td>
               <Button
                 role="button"
                 className="smart-hub--file-tag-button"
@@ -96,14 +110,17 @@ const FileUploader = ({ onChange, files }) => {
                 onClick={() => { onFileRemoved(index); }}
               >
                 <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="white" icon={faCircle} />
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTimes} />
+                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
                 </span>
               </Button>
-            </Tag>
-          </Grid>
+          </td>
+
+          </tr>
+
         ))}
-      </Grid>
+        </tbody>
+      </table>
+        
     </>
   );
 };
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 1b7f0c2650..9a5e59a53c 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -29,6 +29,7 @@ function Navigator({
   additionalData,
   onSave,
   autoSaveInterval,
+  reportId,
 }) {
   const [formData, updateFormData] = useState(initialData);
   const [errorMessage, updateErrorMessage] = useState();
@@ -131,6 +132,7 @@ function Navigator({
               submitted,
               onFormSubmit,
               additionalData,
+              reportId,
             )}
           {!page.review
             && (
@@ -142,7 +144,7 @@ function Navigator({
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
-                  {page.render(hookForm, additionalData)}
+                  {page.render(hookForm, additionalData, reportId)}
                   <Button type="submit" disabled={!isValid}>Continue</Button>
                 </Form>
               </Container>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
new file mode 100644
index 0000000000..31389dca62
--- /dev/null
+++ b/frontend/src/fetchers/File.js
@@ -0,0 +1,9 @@
+import join from 'url-join';
+import { get, put, post } from './index';
+
+const activityReportUrl = join('/', 'api', 'files');
+
+export const uploadFile = async (data) => {
+  const res = await post(activityReportUrl, data);
+  return res.json();
+};
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 86bc9df499..11fb22fafb 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -15,6 +15,7 @@ import { topics } from '../constants';
 const TopicsResources = ({
   register,
   control,
+  reportId,
 }) => (
   <>
     <Helmet>
@@ -56,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
           )}
         />
       </div>
@@ -69,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} id="attachments" />
+          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>
@@ -113,12 +114,13 @@ export default {
   path: 'topics-resources',
   sections,
   review: false,
-  render: (hookForm) => {
+  render: (hookForm, additionalData, reportId) => {
     const { control, register } = hookForm;
     return (
       <TopicsResources
         register={register}
         control={control}
+        reportId={reportId}
       />
     );
   },
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 7177a288c5..5e1157122d 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -152,6 +152,7 @@ function ActivityReport({ match }) {
       <Helmet titleTemplate="%s - Activity Report - TTA Smart Hub" defaultTitle="TTA Smart Hub - Activity Report" />
       <h1 className="new-activity-report">New activity report for Region 14</h1>
       <Navigator
+        reportId={reportId.current}
         currentPage={currentPage}
         submitted={submitted}
         additionalData={initialAdditionalData}

From 3ebd889914b40b1e33ea4221da779e1b1683f4be Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 15:14:53 -0500
Subject: [PATCH 18/35] Style file upload

---
 frontend/src/components/FileUploader.css | 14 +++++--
 frontend/src/components/FileUploader.js  | 48 +++++++++++++++---------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/FileUploader.css b/frontend/src/components/FileUploader.css
index cf0e827586..90d6710490 100644
--- a/frontend/src/components/FileUploader.css
+++ b/frontend/src/components/FileUploader.css
@@ -30,10 +30,16 @@
   /* border: 1px solid #979797; */
 }
 
-/* .files-table--file-name {
-  width: 50%;
-} */
+.files-table--thead th, .files-table td {
+  padding: .5rem;
+  text-align: left;
+  font-size: .9rem;
+}
+.files-table--container {
+  border: solid 1px #979797;
+  min-height: 8rem;
+}
 
-.files-table td {
+.files-table--empty {
   text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index d4f78a6c8e..b5b78b199e 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -63,30 +63,27 @@ Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
 
-const FileUploader = ({ onChange, files }) => {
-  const onFilesAdded = (newFiles) => {
-    onChange([...files, ...newFiles]);
-  };
-
-  const onFileRemoved = (removedFileIndex) => {
-    onChange(files.filter((f, index) => (index !== removedFileIndex)));
-  };
-
+const FileTable = ({onFileRemoved, files}) => {
+  let msg 
+  if (files.length === 0) {
+    msg = (
+      <p className="files-table--empty">No files uploaded</p>
+    )
+  }
   return (
-    <>
-      <Dropzone onChange={onFilesAdded} />
-      <table row gap className="margin-top-2 files-table">
-        <thead bgcolor="#F8F8F8">
-        <th>
+    <div className="files-table--container margin-top-2">
+      <table row gap className="files-table">
+        <thead className="files-table--thead" bgcolor="#F8F8F8">
+        <th width="50%">
           Name
         </th>
-        <th>
+        <th width="20%">
           Size
         </th>
-        <th>
+        <th width="20%">
           Status
         </th>
-        <th>
+        <th width="10%">
         </th>
         </thead>
         <tbody>
@@ -120,6 +117,23 @@ const FileUploader = ({ onChange, files }) => {
         ))}
         </tbody>
       </table>
+      { msg }
+    </div>
+  );
+}
+const FileUploader = ({ onChange, files }) => {
+  const onFilesAdded = (newFiles) => {
+    onChange([...files, ...newFiles]);
+  };
+
+  const onFileRemoved = (removedFileIndex) => {
+    onChange(files.filter((f, index) => (index !== removedFileIndex)));
+  };
+
+  return (
+    <>
+      <Dropzone onChange={onFilesAdded} />
+      <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
   );

From e09e2da057b7da5ef32443722a6307eb0a01845f Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 16:26:31 -0500
Subject: [PATCH 19/35] enable file upload

---
 frontend/src/components/FileUploader.js       | 27 ++++++++++++++++---
 frontend/src/fetchers/File.js                 | 13 ++++++---
 .../ActivityReport/Pages/topicsResources.js   |  4 +--
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index b5b78b199e..3582f60de9 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -8,16 +8,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
+import * as FS from 'fs';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Tag, Button, Grid } from '@trussworks/react-uswds';
+import { uploadFile } from '../fetchers/File';
 
 import './FileUploader.css';
 
 function Dropzone(props) {
-  const { onChange } = props;
+  const { onChange, id, reportId } = props;
   const onDrop = (e) => {
+    let attachmentType;
+    if (id === 'attachments') {
+      attachmentType = 'ATTACHMENT';
+    } else if (id === "other-resources") {
+      attachmentType = 'RESOURCE';
+    }
+    e.forEach( async (file) => {
+    try {
+      const data = new FormData()
+      data.append("reportId", reportId)
+      data.append("attachmentType", attachmentType)
+      data.append("file", file)
+      await uploadFile(data)
+    } catch (error) {
+      console.log(error)
+    }
+
+    });
+
     console.log(e)
     onChange(e);
   };
@@ -121,7 +142,7 @@ const FileTable = ({onFileRemoved, files}) => {
     </div>
   );
 }
-const FileUploader = ({ onChange, files }) => {
+const FileUploader = ({ onChange, files, reportId, id }) => {
   const onFilesAdded = (newFiles) => {
     onChange([...files, ...newFiles]);
   };
@@ -132,7 +153,7 @@ const FileUploader = ({ onChange, files }) => {
 
   return (
     <>
-      <Dropzone onChange={onFilesAdded} />
+      <Dropzone id={id} reportId={reportId} onChange={onFilesAdded} />
       <FileTable onFileRemoved={onFileRemoved} files={files} />
         
     </>
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 31389dca62..275d96f6c0 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -1,9 +1,16 @@
 import join from 'url-join';
-import { get, put, post } from './index';
+import { get } from './index';
 
 const activityReportUrl = join('/', 'api', 'files');
 
 export const uploadFile = async (data) => {
-  const res = await post(activityReportUrl, data);
-  return res.json();
+  const res = await fetch(activityReportUrl, {
+    method: 'POST',
+    credentials: 'same-origin',
+    body: data
+  });
+  if (!res.ok) {
+    throw new Error(res.statusText);
+  }
+  return res;
 };
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 11fb22fafb..2bc4cb9293 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -57,7 +57,7 @@ const TopicsResources = ({
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} attachmentType="Resources" id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="other-resources" />
           )}
         />
       </div>
@@ -70,7 +70,7 @@ const TopicsResources = ({
         defaultValue={[]}
         control={control}
         render={({ onChange, value }) => (
-          <FileUploader files={value} onChange={onChange} attachmentType="Attachments" reportId={reportId} id="attachments" />
+          <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
         )}
       />
     </Fieldset>

From 387a5e70601ba69f1d87a2d842e4a97be5893df9 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 14:43:03 -0500
Subject: [PATCH 20/35] rebase on main

---
 frontend/src/fetchers/File.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 275d96f6c0..815a012222 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -1,5 +1,4 @@
 import join from 'url-join';
-import { get } from './index';
 
 const activityReportUrl = join('/', 'api', 'files');
 

From 291fad8e203248f6e3668c910b65b477c6916b04 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 16:52:33 -0500
Subject: [PATCH 21/35] fmt

---
 frontend/src/components/FileUploader.js | 84 +++++++++----------------
 1 file changed, 29 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 3582f60de9..bb27f886bb 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -8,11 +8,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
-import * as FS from 'fs';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Tag, Button, Grid } from '@trussworks/react-uswds';
+import {  Button } from '@trussworks/react-uswds';
 import { uploadFile } from '../fetchers/File';
 
 import './FileUploader.css';
@@ -23,57 +21,31 @@ function Dropzone(props) {
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
-    } else if (id === "other-resources") {
+    } else if (id === 'other-resources') {
       attachmentType = 'RESOURCE';
     }
     e.forEach( async (file) => {
-    try {
-      const data = new FormData()
-      data.append("reportId", reportId)
-      data.append("attachmentType", attachmentType)
-      data.append("file", file)
-      await uploadFile(data)
-    } catch (error) {
-      console.log(error)
-    }
-
+      try {
+        const data = new FormData();
+        data.append('reportId', reportId);
+        data.append('attachmentType', attachmentType);
+        data.append('file', file)
+        await uploadFile(data)
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
     });
-
-    console.log(e)
     onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
-  // I tried moving these styles to a css file and applying a class to the container
-  // and span. The styles were not being applied, it seems like the Dropzone library
-  // is messing with the styles somewhere
-  const containerStyle = {
-    maxWidth: '21rem',
-    height: '8rem',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderStyle: 'dashed',
-    borderWidth: '0.125rem',
-    borderColor: '#979797',
-  };
-
-  const textStyle = {
-    textAlign: 'left',
-    fontSize: '1.25rem',
-    backgroundColor: "#0166AB",
-    color: "white", 
-    padding: ".5rem",
-    borderRadius: "5px",
-  };
-
-
   return (
     <div
       {...getRootProps()}
     >
       <input {...getInputProps()} />
-      <button className="usa-button">
+      <button className='usa-button'>
         Browse files
       </button>
     </div>
@@ -82,35 +54,37 @@ function Dropzone(props) {
 
 Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
+  reportId: PropTypes.any.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 const FileTable = ({onFileRemoved, files}) => {
   let msg 
   if (files.length === 0) {
     msg = (
-      <p className="files-table--empty">No files uploaded</p>
+      <p className='files-table--empty'>No files uploaded</p>
     )
   }
   return (
-    <div className="files-table--container margin-top-2">
-      <table row gap className="files-table">
-        <thead className="files-table--thead" bgcolor="#F8F8F8">
-        <th width="50%">
+    <div className='files-table--container margin-top-2'>
+      <table row gap className='files-table'>
+        <thead className='files-table--thead' bgcolor='#F8F8F8'>
+        <th width='50%'>
           Name
         </th>
-        <th width="20%">
+        <th width='20%'>
           Size
         </th>
-        <th width="20%">
+        <th width='20%'>
           Status
         </th>
-        <th width="10%">
+        <th width='10%'>
         </th>
         </thead>
         <tbody>
         {files.map((file, index) => (
         <tr>
-            <td className="files-table--file-name">
+            <td className='files-table--file-name'>
               {file.name}
             </td>
             <td>
@@ -121,14 +95,14 @@ const FileTable = ({onFileRemoved, files}) => {
             </td>
           <td>
               <Button
-                role="button"
-                className="smart-hub--file-tag-button"
+                role='button'
+                className='smart-hub--file-tag-button'
                 unstyled
-                aria-label="remove file"
+                aria-label='remove file'
                 onClick={() => { onFileRemoved(index); }}
               >
-                <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                <span className='fa-stack fa-sm'>
+                  <FontAwesomeIcon className='fa-stack-1x' color='black' icon={faTrash} />
                 </span>
               </Button>
           </td>

From ab3b87a9f0f04426cae5a1306cf4da1612cb719c Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Thu, 28 Jan 2021 17:25:17 -0500
Subject: [PATCH 22/35] fmt

---
 frontend/src/components/FileUploader.js       | 118 ++++++++++--------
 frontend/src/components/Navigator/index.js    |   1 +
 frontend/src/fetchers/File.js                 |   6 +-
 .../ActivityReport/Pages/topicsResources.js   |   1 +
 4 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index bb27f886bb..8c7deab3cf 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import {  Button } from '@trussworks/react-uswds';
-import { uploadFile } from '../fetchers/File';
+import { Button } from '@trussworks/react-uswds';
+import uploadFile from '../fetchers/File';
 
 import './FileUploader.css';
 
@@ -24,13 +24,13 @@ function Dropzone(props) {
     } else if (id === 'other-resources') {
       attachmentType = 'RESOURCE';
     }
-    e.forEach( async (file) => {
+    e.forEach(async (file) => {
       try {
         const data = new FormData();
         data.append('reportId', reportId);
         data.append('attachmentType', attachmentType);
-        data.append('file', file)
-        await uploadFile(data)
+        data.append('file', file);
+        await uploadFile(data);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -45,7 +45,7 @@ function Dropzone(props) {
       {...getRootProps()}
     >
       <input {...getInputProps()} />
-      <button className='usa-button'>
+      <button type="button" className="usa-button">
         Browse files
       </button>
     </div>
@@ -54,69 +54,77 @@ function Dropzone(props) {
 
 Dropzone.propTypes = {
   onChange: PropTypes.func.isRequired,
-  reportId: PropTypes.any.isRequired,
+  reportId: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
 };
 
-const FileTable = ({onFileRemoved, files}) => {
-  let msg 
+const FileTable = ({ onFileRemoved, files }) => {
+  let msg;
   if (files.length === 0) {
     msg = (
-      <p className='files-table--empty'>No files uploaded</p>
-    )
+      <p className="files-table--empty">No files uploaded</p>
+    );
   }
   return (
-    <div className='files-table--container margin-top-2'>
-      <table row gap className='files-table'>
-        <thead className='files-table--thead' bgcolor='#F8F8F8'>
-        <th width='50%'>
-          Name
-        </th>
-        <th width='20%'>
-          Size
-        </th>
-        <th width='20%'>
-          Status
-        </th>
-        <th width='10%'>
-        </th>
+    <div className="files-table--container margin-top-2">
+      <table row gap className="files-table">
+        <thead className="files-table--thead" bgcolor="#F8F8F8">
+          <th width="50%">
+            Name
+          </th>
+          <th width="20%">
+            Size
+          </th>
+          <th width="20%">
+            Status
+          </th>
+          <th width="10%" aria-label="remove file" />
         </thead>
         <tbody>
-        {files.map((file, index) => (
-        <tr>
-            <td className='files-table--file-name'>
-              {file.name}
-            </td>
-            <td>
-              {`${(file.size / 1000).toFixed(1) } KB`}
-            </td>
-            <td>
-              Uploaded
-            </td>
-          <td>
-              <Button
-                role='button'
-                className='smart-hub--file-tag-button'
-                unstyled
-                aria-label='remove file'
-                onClick={() => { onFileRemoved(index); }}
-              >
-                <span className='fa-stack fa-sm'>
-                  <FontAwesomeIcon className='fa-stack-1x' color='black' icon={faTrash} />
-                </span>
-              </Button>
-          </td>
+          {files.map((file, index) => (
+            <tr>
+              <td className="files-table--file-name">
+                {file.name}
+              </td>
+              <td>
+                {`${(file.size / 1000).toFixed(1)} KB`}
+              </td>
+              <td>
+                Uploaded
+              </td>
+              <td>
+                <Button
+                  role="button"
+                  className="smart-hub--file-tag-button"
+                  unstyled
+                  aria-label="remove file"
+                  onClick={() => { onFileRemoved(index); }}
+                >
+                  <span className="fa-stack fa-sm">
+                    <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                  </span>
+                </Button>
+              </td>
 
-          </tr>
+            </tr>
 
-        ))}
+          ))}
         </tbody>
       </table>
       { msg }
     </div>
   );
-}
-const FileUploader = ({ onChange, files, reportId, id }) => {
+};
+FileTable.propTypes = {
+  onFileRemoved: PropTypes.func.isRequired,
+  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+};
+FileTable.defaultProps = {
+  files: [],
+};
+const FileUploader = ({
+  onChange, files, reportId, id,
+}) => {
   const onFilesAdded = (newFiles) => {
     onChange([...files, ...newFiles]);
   };
@@ -129,7 +137,7 @@ const FileUploader = ({ onChange, files, reportId, id }) => {
     <>
       <Dropzone id={id} reportId={reportId} onChange={onFilesAdded} />
       <FileTable onFileRemoved={onFileRemoved} files={files} />
-        
+
     </>
   );
 };
@@ -137,6 +145,8 @@ const FileUploader = ({ onChange, files, reportId, id }) => {
 FileUploader.propTypes = {
   onChange: PropTypes.func.isRequired,
   files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  reportId: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 FileUploader.defaultProps = {
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 9a5e59a53c..a0cf8a44b0 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -172,6 +172,7 @@ Navigator.propTypes = {
   currentPage: PropTypes.string.isRequired,
   autoSaveInterval: PropTypes.number,
   additionalData: PropTypes.shape({}),
+  reportId: PropTypes.node.isRequired,
 };
 
 Navigator.defaultProps = {
diff --git a/frontend/src/fetchers/File.js b/frontend/src/fetchers/File.js
index 815a012222..a1a2f176b4 100644
--- a/frontend/src/fetchers/File.js
+++ b/frontend/src/fetchers/File.js
@@ -2,14 +2,14 @@ import join from 'url-join';
 
 const activityReportUrl = join('/', 'api', 'files');
 
-export const uploadFile = async (data) => {
+export default async function uploadFile(data) {
   const res = await fetch(activityReportUrl, {
     method: 'POST',
     credentials: 'same-origin',
-    body: data
+    body: data,
   });
   if (!res.ok) {
     throw new Error(res.statusText);
   }
   return res;
-};
\ No newline at end of file
+}
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 2bc4cb9293..994aacccd1 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -81,6 +81,7 @@ TopicsResources.propTypes = {
   register: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   control: PropTypes.object.isRequired,
+  reportId: PropTypes.node.isRequired,
 };
 
 const sections = [

From b4c0aab31aa5d8397c8a57b77c3000600999b974 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Fri, 29 Jan 2021 09:27:29 -0500
Subject: [PATCH 23/35] fix tests

---
 frontend/src/components/FileUploader.js           |  7 +++++--
 frontend/src/components/__tests__/FileUploader.js | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 8c7deab3cf..a6a027e66a 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -67,8 +67,9 @@ const FileTable = ({ onFileRemoved, files }) => {
   }
   return (
     <div className="files-table--container margin-top-2">
-      <table row gap className="files-table">
+      <table className="files-table">
         <thead className="files-table--thead" bgcolor="#F8F8F8">
+          <tr>
           <th width="50%">
             Name
           </th>
@@ -79,10 +80,12 @@ const FileTable = ({ onFileRemoved, files }) => {
             Status
           </th>
           <th width="10%" aria-label="remove file" />
+
+          </tr>
         </thead>
         <tbody>
           {files.map((file, index) => (
-            <tr>
+            <tr id={`files-table-row-${index}`}>
               <td className="files-table--file-name">
                 {file.name}
               </td>
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index e9f3ca4fc6..7498fba101 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -34,7 +34,7 @@ describe('FileUploader', () => {
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
     const data = mockData([file('file')]);
-    const ui = <FileUploader onChange={mockOnChange} files={[]} />;
+    const ui = <FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[]} />;
     const { container, rerender } = render(ui);
     const dropzone = container.querySelector('div');
 
@@ -45,16 +45,17 @@ describe('FileUploader', () => {
   });
 
   it('files are properly displayed', () => {
-    render(<FileUploader onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment"  onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
     expect(screen.getByText('fileOne')).toBeVisible();
     expect(screen.getByText('fileTwo')).toBeVisible();
   });
 
   it('files can be removed', () => {
     const mockOnChange = jest.fn();
-    render(<FileUploader onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
-    const fileOne = screen.getByText('fileOne');
-    fireEvent.click(fileOne.nextSibling);
+    render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
+    const fileTwo = screen.getByText('fileTwo');
+    console.log(fileTwo.parentNode.lastChild.firstChild)
+    fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
     expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
   });

From 1ecd7947a98f9407287596eec71f414d928df2a5 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Fri, 29 Jan 2021 17:10:16 -0500
Subject: [PATCH 24/35] update so attached files display

---
 frontend/src/components/FileUploader.js       | 12 +++++------
 .../src/components/__tests__/FileUploader.js  |  4 ++--
 .../ActivityReport/Pages/topicsResources.js   |  8 +++----
 .../20210129210854-add-fileSize-to-files.js   | 14 +++++++++++++
 src/models/activityReport.js                  |  3 ++-
 src/models/file.js                            |  4 ++++
 src/routes/files/handlers.js                  | 15 +++++++++++--
 src/routes/files/handlers.test.js             | 10 +++++++++
 src/services/activityReports.js               | 21 ++++++++++++++++++-
 9 files changed, 75 insertions(+), 16 deletions(-)
 create mode 100644 src/migrations/20210129210854-add-fileSize-to-files.js

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index a6a027e66a..0cb3433e8a 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -21,7 +21,7 @@ function Dropzone(props) {
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
-    } else if (id === 'other-resources') {
+    } else if (id === 'otherResources') {
       attachmentType = 'RESOURCE';
     }
     e.forEach(async (file) => {
@@ -31,12 +31,12 @@ function Dropzone(props) {
         data.append('attachmentType', attachmentType);
         data.append('file', file);
         await uploadFile(data);
+        onChange([{originalFileName: file.name, fileSize: file.size, status: "Uploaded"}])
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
       }
     });
-    onChange(e);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
@@ -87,13 +87,13 @@ const FileTable = ({ onFileRemoved, files }) => {
           {files.map((file, index) => (
             <tr id={`files-table-row-${index}`}>
               <td className="files-table--file-name">
-                {file.name}
+                {file.originalFileName}
               </td>
               <td>
-                {`${(file.size / 1000).toFixed(1)} KB`}
+                {`${(file.fileSize / 1000).toFixed(1)} KB`}
               </td>
               <td>
-                Uploaded
+                {file.status}
               </td>
               <td>
                 <Button
@@ -147,7 +147,7 @@ const FileUploader = ({
 
 FileUploader.propTypes = {
   onChange: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  files: PropTypes.arrayOf(PropTypes.object),
   reportId: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
 };
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index 7498fba101..bfc71ae6e2 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -29,7 +29,7 @@ describe('FileUploader', () => {
     },
   });
 
-  const file = (name) => new File([''], name, { type: 'text/html' });
+  const file = (name) => { return {originalFileName: name, fileSize: 2000, status: "Uploaded"}};
 
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
@@ -54,7 +54,7 @@ describe('FileUploader', () => {
     const mockOnChange = jest.fn();
     render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
     const fileTwo = screen.getByText('fileTwo');
-    console.log(fileTwo.parentNode.lastChild.firstChild)
+    console.log(fileTwo.parentNode)
     fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
     expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 994aacccd1..f37f74e543 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -51,13 +51,13 @@ const TopicsResources = ({
         />
       </div>
       <div className="smart-hub--form-section">
-        <Label htmlFor="other-resources">Upload any resources used that are not available through ECLKC</Label>
+        <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
         <Controller
-          name="other-resources"
+          name="otherResources"
           defaultValue={[]}
           control={control}
           render={({ onChange, value }) => (
-            <FileUploader files={value} onChange={onChange} reportId={reportId} id="other-resources" />
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="otherResources" />
           )}
         />
       </div>
@@ -97,7 +97,7 @@ const sections = [
     anchor: 'resources',
     items: [
       { label: 'Resources used', name: 'resourcesUsed' },
-      { label: 'Other resources', name: 'other-resources', path: 'name' },
+      { label: 'Other resources', name: 'otherResources', path: 'name' },
     ],
   },
   {
diff --git a/src/migrations/20210129210854-add-fileSize-to-files.js b/src/migrations/20210129210854-add-fileSize-to-files.js
new file mode 100644
index 0000000000..0c8449ca72
--- /dev/null
+++ b/src/migrations/20210129210854-add-fileSize-to-files.js
@@ -0,0 +1,14 @@
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('Files',
+      'fileSize',
+      {
+        type: Sequelize.INTEGER,
+        allowNull: false,
+      });
+  },
+
+  down: async (queryInterface) => {
+    await queryInterface.removeColumn('Files', 'fileSize');
+  },
+};
diff --git a/src/models/activityReport.js b/src/models/activityReport.js
index 0c00b30f69..9725a22eea 100644
--- a/src/models/activityReport.js
+++ b/src/models/activityReport.js
@@ -26,7 +26,8 @@ export default (sequelize, DataTypes) => {
         as: 'collaborators',
       });
       ActivityReport.belongsTo(models.Region, { foreignKey: 'regionId', as: 'region' });
-      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'activityFiles' });
+      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'attachments' });
+      ActivityReport.hasMany(models.File, { foreignKey: 'activityReportId', as: 'otherResources' });
     }
   }
   ActivityReport.init({
diff --git a/src/models/file.js b/src/models/file.js
index 109e8939a7..a105396655 100644
--- a/src/models/file.js
+++ b/src/models/file.js
@@ -32,6 +32,10 @@ module.exports = (sequelize, DataTypes) => {
       type: DataTypes.ENUM('ATTACHMENT', 'RESOURCE'),
       allowNull: false,
     },
+    fileSize: {
+      type: DataTypes.INTEGER,
+      allowNull: false,
+    },
   }, {
     sequelize,
     modelName: 'File',
diff --git a/src/routes/files/handlers.js b/src/routes/files/handlers.js
index b3a12a1c2b..8927102dd7 100644
--- a/src/routes/files/handlers.js
+++ b/src/routes/files/handlers.js
@@ -21,6 +21,7 @@ export const createFileMetaData = async (
   s3FileName,
   reportId,
   attachmentType,
+  fileSize,
 ) => {
   const newFile = {
     activityReportId: reportId,
@@ -28,6 +29,7 @@ export const createFileMetaData = async (
     attachmentType,
     key: s3FileName,
     status: 'UPLOADING',
+    fileSize,
   };
   let file;
   try {
@@ -64,8 +66,11 @@ export default async function uploadHandler(req, res) {
         res.status(400).send({ error: 'file required' });
         return;
       }
-      const { path, originalFilename } = files.file[0];
+      const { path, originalFilename, size } = files.file[0];
       const { reportId, attachmentType } = fields;
+      if (!size) {
+        res.status(400).send({ error: 'improper file size' });
+      }
       if (!reportId) {
         res.status(400).send({ error: 'reportId required' });
         return;
@@ -85,7 +90,13 @@ export default async function uploadHandler(req, res) {
         return;
       }
       fileName = `${uuidv4()}.${type.ext}`;
-      metadata = await createFileMetaData(originalFilename, fileName, reportId, attachmentType[0]);
+      metadata = await createFileMetaData(
+        originalFilename,
+        fileName,
+        reportId,
+        attachmentType[0],
+        size,
+      );
     } catch (err) {
       await handleErrors(req, res, err, logContext);
       return;
diff --git a/src/routes/files/handlers.test.js b/src/routes/files/handlers.test.js
index c5c77f5029..0712b6c0c8 100644
--- a/src/routes/files/handlers.test.js
+++ b/src/routes/files/handlers.test.js
@@ -94,6 +94,16 @@ describe('File Upload', () => {
       expect(file.dataValues.activityReportId).toBe(report.dataValues.id);
       expect(validate(uuid)).toBe(true);
     });
+    // it('checks that we get the proper data back', async ()  => {
+    //   let fileObject;
+    //   await request(app)
+    //     .get(`/api/files/${report.dataValues.id}`)
+    //     .expect(200)
+    //     .then((res) => {
+    //       fileObject = res.body[0];
+    //     });
+    //     const {id, activityReportId, }
+    // });
   });
 
   describe('File Upload Handlers error handling', () => {
diff --git a/src/services/activityReports.js b/src/services/activityReports.js
index 9e601fcd67..cc94db2aa2 100644
--- a/src/services/activityReports.js
+++ b/src/services/activityReports.js
@@ -6,6 +6,7 @@ import {
   ActivityReportCollaborator,
   sequelize,
   ActivityRecipient,
+  File,
   Grant,
   Grantee,
   NonGrantee,
@@ -144,13 +145,31 @@ export function activityReportById(activityReportId) {
         attributes: ['id', 'name'],
         as: 'collaborators',
       },
+      {
+        model: File,
+        where: { attachmentType: 'ATTACHMENT' },
+        as: 'attachments',
+        required: false,
+      },
+      {
+        model: File,
+        where: { attachmentType: 'RESOURCE' },
+        as: 'otherResources',
+        required: false,
+      },
     ],
   });
 }
 
 export async function createOrUpdate(newActivityReport, report) {
   let savedReport;
-  const { collaborators, activityRecipients, ...updatedFields } = newActivityReport;
+  const {
+    collaborators,
+    activityRecipients,
+    attachments,
+    otherResources,
+    ...updatedFields
+  } = newActivityReport;
   await sequelize.transaction(async (transaction) => {
     if (report) {
       savedReport = await update(updatedFields, report, transaction);

From 5358fb0d1b531d1aa16fbd38dc3c2f0b970c6e97 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 15:21:32 -0500
Subject: [PATCH 25/35] fix tests

---
 frontend/src/components/FileUploader.js       | 24 +++++++++----------
 .../src/components/__tests__/FileUploader.js  | 13 +++++-----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 0cb3433e8a..fb513a0135 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -31,7 +31,7 @@ function Dropzone(props) {
         data.append('attachmentType', attachmentType);
         data.append('file', file);
         await uploadFile(data);
-        onChange([{originalFileName: file.name, fileSize: file.size, status: "Uploaded"}])
+        onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -70,16 +70,16 @@ const FileTable = ({ onFileRemoved, files }) => {
       <table className="files-table">
         <thead className="files-table--thead" bgcolor="#F8F8F8">
           <tr>
-          <th width="50%">
-            Name
-          </th>
-          <th width="20%">
-            Size
-          </th>
-          <th width="20%">
-            Status
-          </th>
-          <th width="10%" aria-label="remove file" />
+            <th width="50%">
+              Name
+            </th>
+            <th width="20%">
+              Size
+            </th>
+            <th width="20%">
+              Status
+            </th>
+            <th width="10%" aria-label="remove file" />
 
           </tr>
         </thead>
@@ -120,7 +120,7 @@ const FileTable = ({ onFileRemoved, files }) => {
 };
 FileTable.propTypes = {
   onFileRemoved: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+  files: PropTypes.arrayOf(PropTypes.object),
 };
 FileTable.defaultProps = {
   files: [],
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index bfc71ae6e2..71931028de 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -3,10 +3,12 @@ import React from 'react';
 import {
   render, fireEvent, waitFor, act, screen,
 } from '@testing-library/react';
+import * as fileFetcher from '../../fetchers/File';
 
 import FileUploader from '../FileUploader';
 
 describe('FileUploader', () => {
+  jest.spyOn(fileFetcher, 'default').mockImplementation(() => Promise.resolve());
   const dispatchEvt = (node, type, data) => {
     const event = new Event(type, { bubbles: true });
     Object.assign(event, data);
@@ -29,7 +31,7 @@ describe('FileUploader', () => {
     },
   });
 
-  const file = (name) => { return {originalFileName: name, fileSize: 2000, status: "Uploaded"}};
+  const file = (name) => ({ originalFileName: name, fileSize: 2000, status: 'Uploaded' });
 
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
@@ -38,25 +40,24 @@ describe('FileUploader', () => {
     const { container, rerender } = render(ui);
     const dropzone = container.querySelector('div');
 
-    dispatchEvt(dropzone, 'drop', data);
+    await dispatchEvt(dropzone, 'drop', data);
     await flushPromises(rerender, ui);
 
     expect(mockOnChange).toHaveBeenCalled();
   });
 
   it('files are properly displayed', () => {
-    render(<FileUploader reportId="new" id="attachment"  onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment" onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
     expect(screen.getByText('fileOne')).toBeVisible();
     expect(screen.getByText('fileTwo')).toBeVisible();
   });
 
   it('files can be removed', () => {
     const mockOnChange = jest.fn();
-    render(<FileUploader reportId="new" id="attachment"  onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
+    render(<FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
     const fileTwo = screen.getByText('fileTwo');
-    console.log(fileTwo.parentNode)
     fireEvent.click(fileTwo.parentNode.lastChild.firstChild);
 
-    expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
+    expect(mockOnChange).toHaveBeenCalledWith([file('fileOne')]);
   });
 });

From 12edd59a99196da928d75e23d67e2ca51148f41f Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:04:25 -0500
Subject: [PATCH 26/35] add error message on failed upload

---
 frontend/src/components/FileUploader.js | 12 ++++++++++--
 src/services/activityReports.js         | 14 ++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index fb513a0135..0834c9b874 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -5,18 +5,19 @@
 // react-dropzone examples all use prop spreading. Disabling the eslint no prop spreading
 // rules https://github.com/react-dropzone/react-dropzone
 /* eslint-disable react/jsx-props-no-spreading */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDropzone } from 'react-dropzone';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@trussworks/react-uswds';
+import { Button, Alert } from '@trussworks/react-uswds';
 import uploadFile from '../fetchers/File';
 
 import './FileUploader.css';
 
 function Dropzone(props) {
   const { onChange, id, reportId } = props;
+  const [errorMessage, setErrorMessage] = useState();
   const onDrop = (e) => {
     let attachmentType;
     if (id === 'attachments') {
@@ -34,6 +35,7 @@ function Dropzone(props) {
         onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
         // eslint-disable-next-line no-console
+        setErrorMessage(`${file.name} failed to upload`)
         console.log(error);
       }
     });
@@ -48,6 +50,12 @@ function Dropzone(props) {
       <button type="button" className="usa-button">
         Browse files
       </button>
+       {errorMessage
+        && (
+          <Alert type="error" slim noIcon className="smart-hub--save-alert">
+            {errorMessage}
+          </Alert>
+        )}
     </div>
   );
 }
diff --git a/src/services/activityReports.js b/src/services/activityReports.js
index cc94db2aa2..9eaa832aaf 100644
--- a/src/services/activityReports.js
+++ b/src/services/activityReports.js
@@ -147,13 +147,23 @@ export function activityReportById(activityReportId) {
       },
       {
         model: File,
-        where: { attachmentType: 'ATTACHMENT' },
+        where: {
+          attachmentType: 'ATTACHMENT',
+          status: {
+            [Op.ne]: 'UPLOAD_FAILED',
+          },
+        },
         as: 'attachments',
         required: false,
       },
       {
         model: File,
-        where: { attachmentType: 'RESOURCE' },
+        where: {
+          attachmentType: 'RESOURCE',
+          status: {
+            [Op.ne]: 'UPLOAD_FAILED',
+          },
+        },
         as: 'otherResources',
         required: false,
       },

From 4b4e70b9fba618514ed92bc2e7a47855889f39b0 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:21:52 -0500
Subject: [PATCH 27/35] fmt

---
 frontend/src/components/FileUploader.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 0834c9b874..5b3d102306 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -34,8 +34,8 @@ function Dropzone(props) {
         await uploadFile(data);
         onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
       } catch (error) {
+        setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console
-        setErrorMessage(`${file.name} failed to upload`)
         console.log(error);
       }
     });
@@ -50,7 +50,7 @@ function Dropzone(props) {
       <button type="button" className="usa-button">
         Browse files
       </button>
-       {errorMessage
+      {errorMessage
         && (
           <Alert type="error" slim noIcon className="smart-hub--save-alert">
             {errorMessage}

From 3eb7089fad7162d65424418159e04c8411de5091 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:30:14 -0500
Subject: [PATCH 28/35] update FileUploader.js

---
 frontend/src/components/FileUploader.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 5b3d102306..64f3920db7 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -67,12 +67,6 @@ Dropzone.propTypes = {
 };
 
 const FileTable = ({ onFileRemoved, files }) => {
-  let msg;
-  if (files.length === 0) {
-    msg = (
-      <p className="files-table--empty">No files uploaded</p>
-    );
-  }
   return (
     <div className="files-table--container margin-top-2">
       <table className="files-table">
@@ -122,7 +116,9 @@ const FileTable = ({ onFileRemoved, files }) => {
           ))}
         </tbody>
       </table>
-      { msg }
+      { files.length === 0 && (
+      <p className="files-table--empty">No files uploaded</p>
+      )}
     </div>
   );
 };

From 1bc98370f406b1ba129a89e1961b5c5988de563a Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 16:32:46 -0500
Subject: [PATCH 29/35] fmt

---
 frontend/src/components/FileUploader.js | 102 ++++++++++++------------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 64f3920db7..1dd52e8110 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -66,62 +66,60 @@ Dropzone.propTypes = {
   id: PropTypes.string.isRequired,
 };
 
-const FileTable = ({ onFileRemoved, files }) => {
-  return (
-    <div className="files-table--container margin-top-2">
-      <table className="files-table">
-        <thead className="files-table--thead" bgcolor="#F8F8F8">
-          <tr>
-            <th width="50%">
-              Name
-            </th>
-            <th width="20%">
-              Size
-            </th>
-            <th width="20%">
-              Status
-            </th>
-            <th width="10%" aria-label="remove file" />
+const FileTable = ({ onFileRemoved, files }) => (
+  <div className="files-table--container margin-top-2">
+    <table className="files-table">
+      <thead className="files-table--thead" bgcolor="#F8F8F8">
+        <tr>
+          <th width="50%">
+            Name
+          </th>
+          <th width="20%">
+            Size
+          </th>
+          <th width="20%">
+            Status
+          </th>
+          <th width="10%" aria-label="remove file" />
 
-          </tr>
-        </thead>
-        <tbody>
-          {files.map((file, index) => (
-            <tr id={`files-table-row-${index}`}>
-              <td className="files-table--file-name">
-                {file.originalFileName}
-              </td>
-              <td>
-                {`${(file.fileSize / 1000).toFixed(1)} KB`}
-              </td>
-              <td>
-                {file.status}
-              </td>
-              <td>
-                <Button
-                  role="button"
-                  className="smart-hub--file-tag-button"
-                  unstyled
-                  aria-label="remove file"
-                  onClick={() => { onFileRemoved(index); }}
-                >
-                  <span className="fa-stack fa-sm">
-                    <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
-                  </span>
-                </Button>
-              </td>
+        </tr>
+      </thead>
+      <tbody>
+        {files.map((file, index) => (
+          <tr id={`files-table-row-${index}`}>
+            <td className="files-table--file-name">
+              {file.originalFileName}
+            </td>
+            <td>
+              {`${(file.fileSize / 1000).toFixed(1)} KB`}
+            </td>
+            <td>
+              {file.status}
+            </td>
+            <td>
+              <Button
+                role="button"
+                className="smart-hub--file-tag-button"
+                unstyled
+                aria-label="remove file"
+                onClick={() => { onFileRemoved(index); }}
+              >
+                <span className="fa-stack fa-sm">
+                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                </span>
+              </Button>
+            </td>
 
-            </tr>
+          </tr>
 
-          ))}
-        </tbody>
-      </table>
-      { files.length === 0 && (
+        ))}
+      </tbody>
+    </table>
+    { files.length === 0 && (
       <p className="files-table--empty">No files uploaded</p>
-      )}
-    </div>
-  );
-};
+    )}
+  </div>
+);
 FileTable.propTypes = {
   onFileRemoved: PropTypes.func.isRequired,
   files: PropTypes.arrayOf(PropTypes.object),

From b8a3d6a4ef0f08ed5e283658644b8e84bc0bcf74 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Mon, 1 Feb 2021 17:18:23 -0500
Subject: [PATCH 30/35] add frontend/fetchers/file.js tests

---
 frontend/src/fetchers/__tests__/File.js | 14 ++++++++++++++
 src/routes/files/handlers.test.js       | 10 ----------
 2 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/fetchers/__tests__/File.js

diff --git a/frontend/src/fetchers/__tests__/File.js b/frontend/src/fetchers/__tests__/File.js
new file mode 100644
index 0000000000..65767d18f9
--- /dev/null
+++ b/frontend/src/fetchers/__tests__/File.js
@@ -0,0 +1,14 @@
+import fetchMock from 'fetch-mock';
+import join from 'url-join';
+import uploadFile from '../File';
+
+const activityReportUrl = join('/', 'api', 'files');
+const fakeFile = new File(['testing'], 'test.txt');
+
+describe('File fetcher', () => {
+  it('test that the file gets uploaded', async () => {
+    fetchMock.mock(activityReportUrl, 200);
+    const res = await uploadFile(fakeFile);
+    expect(res.status).toBe(200);
+  });
+});
diff --git a/src/routes/files/handlers.test.js b/src/routes/files/handlers.test.js
index 0712b6c0c8..c5c77f5029 100644
--- a/src/routes/files/handlers.test.js
+++ b/src/routes/files/handlers.test.js
@@ -94,16 +94,6 @@ describe('File Upload', () => {
       expect(file.dataValues.activityReportId).toBe(report.dataValues.id);
       expect(validate(uuid)).toBe(true);
     });
-    // it('checks that we get the proper data back', async ()  => {
-    //   let fileObject;
-    //   await request(app)
-    //     .get(`/api/files/${report.dataValues.id}`)
-    //     .expect(200)
-    //     .then((res) => {
-    //       fileObject = res.body[0];
-    //     });
-    //     const {id, activityReportId, }
-    // });
   });
 
   describe('File Upload Handlers error handling', () => {

From bf91b1e9e9e9b57e7dce05ec531914550ade3981 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Tue, 2 Feb 2021 15:44:17 -0500
Subject: [PATCH 31/35] enable multiple file uploads add error message if
 report isn't saved

---
 frontend/src/components/FileUploader.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 1dd52e8110..9baa2fb29c 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -18,27 +18,35 @@ import './FileUploader.css';
 function Dropzone(props) {
   const { onChange, id, reportId } = props;
   const [errorMessage, setErrorMessage] = useState();
-  const onDrop = (e) => {
+  const onDrop = async (e) => {
+    if (props.reportId === 'new') {
+      setErrorMessage('Cannot save attachments without a Grantee or Non-Grantee selected')
+      return
+    }
+    let newFiles = [];
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
     } else if (id === 'otherResources') {
       attachmentType = 'RESOURCE';
     }
-    e.forEach(async (file) => {
+    for (let i = 0; i < e.length; i++) {
+      const file = e[i];
       try {
         const data = new FormData();
         data.append('reportId', reportId);
         data.append('attachmentType', attachmentType);
         data.append('file', file);
         await uploadFile(data);
-        onChange([{ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' }]);
+        newFiles.push({ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' });
+        setErrorMessage(null)
       } catch (error) {
         setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console
         console.log(error);
       }
-    });
+    } 
+    onChange(newFiles)
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 

From a721197e6ce1a65c272687103c57d27ae7428f77 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Tue, 2 Feb 2021 16:02:08 -0500
Subject: [PATCH 32/35] fmt

---
 frontend/src/components/FileUploader.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 9baa2fb29c..4e1a85fe49 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -20,18 +20,17 @@ function Dropzone(props) {
   const [errorMessage, setErrorMessage] = useState();
   const onDrop = async (e) => {
     if (props.reportId === 'new') {
-      setErrorMessage('Cannot save attachments without a Grantee or Non-Grantee selected')
-      return
+      setErrorMessage('Cannot save attachments without a Grantee or Non-Grantee selected');
+      return;
     }
-    let newFiles = [];
+    const newFiles = [];
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
     } else if (id === 'otherResources') {
       attachmentType = 'RESOURCE';
     }
-    for (let i = 0; i < e.length; i++) {
-      const file = e[i];
+    const upload = async (file) => {
       try {
         const data = new FormData();
         data.append('reportId', reportId);
@@ -39,14 +38,15 @@ function Dropzone(props) {
         data.append('file', file);
         await uploadFile(data);
         newFiles.push({ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' });
-        setErrorMessage(null)
+        setErrorMessage(null);
       } catch (error) {
         setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console
         console.log(error);
       }
-    } 
-    onChange(newFiles)
+    };
+    e.forEach(async (file) => upload(file));
+    onChange(newFiles);
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 

From 4a1e6af3f008d165e1e23bd6dec5d57b1777cca1 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Tue, 2 Feb 2021 16:34:23 -0500
Subject: [PATCH 33/35] update tests

---
 frontend/src/components/__tests__/FileUploader.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
index 71931028de..c7b52c3082 100644
--- a/frontend/src/components/__tests__/FileUploader.js
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -36,7 +36,7 @@ describe('FileUploader', () => {
   it('onDrop adds calls the onChange method', async () => {
     const mockOnChange = jest.fn();
     const data = mockData([file('file')]);
-    const ui = <FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[]} />;
+    const ui = <FileUploader reportId="3" id="attachment" onChange={mockOnChange} files={[]} />;
     const { container, rerender } = render(ui);
     const dropzone = container.querySelector('div');
 
@@ -46,6 +46,19 @@ describe('FileUploader', () => {
     expect(mockOnChange).toHaveBeenCalled();
   });
 
+  it('checks that onDrop does not run if reportId is new', async () => {
+    const mockOnChange = jest.fn();
+    const data = mockData([file('file')]);
+    const ui = <FileUploader reportId="new" id="attachment" onChange={mockOnChange} files={[]} />;
+    const { container, rerender } = render(ui);
+    const dropzone = container.querySelector('div');
+
+    await dispatchEvt(dropzone, 'drop', data);
+    await flushPromises(rerender, ui);
+
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
+
   it('files are properly displayed', () => {
     render(<FileUploader reportId="new" id="attachment" onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
     expect(screen.getByText('fileOne')).toBeVisible();

From 33f39efc9612ea369b23dcb8406caac4e673cc59 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Tue, 2 Feb 2021 21:26:49 -0500
Subject: [PATCH 34/35] fix multi file uploads

---
 frontend/src/components/FileUploader.js | 22 +++++++++++++---------
 src/models/file.js                      |  1 +
 src/routes/files/handlers.js            |  2 +-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 4e1a85fe49..647d0321b4 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -23,7 +23,6 @@ function Dropzone(props) {
       setErrorMessage('Cannot save attachments without a Grantee or Non-Grantee selected');
       return;
     }
-    const newFiles = [];
     let attachmentType;
     if (id === 'attachments') {
       attachmentType = 'ATTACHMENT';
@@ -36,17 +35,22 @@ function Dropzone(props) {
         data.append('reportId', reportId);
         data.append('attachmentType', attachmentType);
         data.append('file', file);
-        await uploadFile(data);
-        newFiles.push({ originalFileName: file.name, fileSize: file.size, status: 'Uploaded' });
-        setErrorMessage(null);
+        res = await uploadFile(data);
       } catch (error) {
         setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console
         console.log(error);
+        return null;
       }
+      setErrorMessage(null);
+      return {
+        key: file.name, originalFileName: file.name, fileSize: file.size, status: 'UPLOADED',
+      };
     };
-    e.forEach(async (file) => upload(file));
-    onChange(newFiles);
+    const newFiles = e.map((file) => upload(file));
+    Promise.all(newFiles).then((values) => {
+      onChange(values);
+    });
   };
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
@@ -94,7 +98,7 @@ const FileTable = ({ onFileRemoved, files }) => (
       </thead>
       <tbody>
         {files.map((file, index) => (
-          <tr id={`files-table-row-${index}`}>
+          <tr key={file.key} id={`files-table-row-${index}`}>
             <td className="files-table--file-name">
               {file.originalFileName}
             </td>
@@ -112,8 +116,8 @@ const FileTable = ({ onFileRemoved, files }) => (
                 aria-label="remove file"
                 onClick={() => { onFileRemoved(index); }}
               >
-                <span className="fa-stack fa-sm">
-                  <FontAwesomeIcon className="fa-stack-1x" color="black" icon={faTrash} />
+                <span className="fa-sm">
+                  <FontAwesomeIcon color="black" icon={faTrash} />
                 </span>
               </Button>
             </td>
diff --git a/src/models/file.js b/src/models/file.js
index a105396655..2ab2a43b8a 100644
--- a/src/models/file.js
+++ b/src/models/file.js
@@ -32,6 +32,7 @@ module.exports = (sequelize, DataTypes) => {
       type: DataTypes.ENUM('ATTACHMENT', 'RESOURCE'),
       allowNull: false,
     },
+    // File size in bytes
     fileSize: {
       type: DataTypes.INTEGER,
       allowNull: false,
diff --git a/src/routes/files/handlers.js b/src/routes/files/handlers.js
index 8927102dd7..7e34e7a513 100644
--- a/src/routes/files/handlers.js
+++ b/src/routes/files/handlers.js
@@ -69,7 +69,7 @@ export default async function uploadHandler(req, res) {
       const { path, originalFilename, size } = files.file[0];
       const { reportId, attachmentType } = fields;
       if (!size) {
-        res.status(400).send({ error: 'improper file size' });
+        res.status(400).send({ error: 'fileSize required' });
       }
       if (!reportId) {
         res.status(400).send({ error: 'reportId required' });

From 95cdef92b66f7e8970ca3837fad2eb8fbaca73a8 Mon Sep 17 00:00:00 2001
From: Chuck McAndrew <chuck.mcandrew@adhocteam.us>
Date: Tue, 2 Feb 2021 21:31:23 -0500
Subject: [PATCH 35/35] fmt

---
 frontend/src/components/FileUploader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
index 647d0321b4..6239e4bc19 100644
--- a/frontend/src/components/FileUploader.js
+++ b/frontend/src/components/FileUploader.js
@@ -35,7 +35,7 @@ function Dropzone(props) {
         data.append('reportId', reportId);
         data.append('attachmentType', attachmentType);
         data.append('file', file);
-        res = await uploadFile(data);
+        await uploadFile(data);
       } catch (error) {
         setErrorMessage(`${file.name} failed to upload`);
         // eslint-disable-next-line no-console