Add error handling on file upload failure

packages/components-faraday/src/components/Files/FileDropzone.js

-import React from 'react'
-import classnames from 'classnames'
-
-import classes from './FileDropzone.local.scss'
-
-const FileDropzone = ({ label }) => (
-  <div className={classnames(classes.dropzone)}>
-    <span>{label}</span>
-  </div>
-)
-
-export default FileDropzone

packages/components-faraday/src/components/Files/FileDropzone.local.scss

-.dropzone {
-  align-items: center;
-  display: flex;
-  height: 60px;
-  justify-content: center;
-  margin: 10px 0;
-
-  span {
-    color: #888;
-    font-size: 14px;
-  }
-}

packages/components-faraday/src/components/Files/FileSection.js

@@ -12,7 +12,6 @@ import {
 
 import FileItem from './FileItem'
 import FilePicker from './FilePicker'
-import FileDropzone from './FileDropzone'
 import classes from './FileSection.local.scss'
 
 const DragHandle = () => (
@@ -92,7 +91,9 @@ const FileSection = ({
           previewFile={previewFile}
           removeFile={removeFile}
         />
-        <FileDropzone label="Drag files here or use the add button." />
+        <div className={classnames(classes.dropzone)}>
+          <span>Drag files here or use the add button.</span>
+        </div>
       </div>,
     ),
   )

packages/components-faraday/src/components/Files/FileSection.local.scss

@@ -60,3 +60,16 @@
 .is-over {
   background-color: #ddd;
 }
+
+.dropzone {
+  align-items: center;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  margin: 10px 0;
+
+  span {
+    color: #888;
+    font-size: 14px;
+  }
+}

packages/components-faraday/src/components/Files/Files.js

 import React from 'react'
 import { get } from 'lodash'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { change as changeForm } from 'redux-form'
@@ -15,12 +16,14 @@ import {
 import { SortableList } from 'pubsweet-components-faraday/src/components'
 
 import FileSection from './FileSection'
+import classes from './Files.local.scss'
 
 import {
   uploadFile,
   deleteFile,
   getRequestStatus,
   getSignedUrl,
+  getFileError,
 } from '../../redux/files'
 
 const Files = ({
@@ -31,9 +34,20 @@ const Files = ({
   changeList,
   dropSortableFile,
   previewFile,
+  error,
   ...rest
 }) => (
   <div>
+    {error && (
+      <div
+        className={classnames({
+          [classes['error-container']]: true,
+          [classes.hidden]: !error,
+        })}
+      >
+        Error uploading file, please try again.
+      </div>
+    )}
     <FileSection
       addFile={addFile('manuscripts')}
       allowedFileExtensions={['pdf', 'doc', 'docx']}
@@ -83,6 +97,7 @@ export default compose(
   connect(
     state => ({
       isFetching: getRequestStatus(state),
+      error: getFileError(state),
     }),
     {
       changeForm,
@@ -142,14 +157,16 @@ export default compose(
       changeForm,
       version,
     }) => type => file => {
-      uploadFile(file, type, version.id).then(fileResponse => {
-        const newFiles = {
-          ...files,
-          [type]: [...files[type], fileResponse],
-        }
-        setFiles(newFiles)
-        changeForm('wizard', 'files', newFiles)
-      })
+      uploadFile(file, type, version.id)
+        .then(file => {
+          const newFiles = {
+            ...files,
+            [type]: [...files[type], file],
+          }
+          setFiles(newFiles)
+          changeForm('wizard', 'files', newFiles)
+        })
+        .catch(e => console.error(`Couldn't upload file.`, e))
     },
     moveItem: ({ moveFiles, files, setFiles }) => type => (
       dragIndex,

packages/components-faraday/src/components/Files/Files.local.scss

-.file-item {
-  align-items: center;
-  border: 1px solid black;
+.error-container {
+  color: firebrick;
   display: flex;
-  margin: 5px;
-
-  .info {
-    border-right: 1px solid black;
-    display: flex;
-    flex: 1;
-    padding: 2px 0;
-  }
-
-  .buttons {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 5px;
-
-    button {
-      border: none;
-      cursor: pointer;
+  justify-content: flex-end;
+  margin: 5px 0;
+}
 
-      &:active,
-      &:focus {
-        outline: none;
-      }
-    }
-  }
+.hidden {
+  opacity: 0;
 }

packages/components-faraday/src/redux/files.js

@@ -56,22 +56,28 @@ const removeFailure = error => ({
   error,
 })
 
-const removeSuccess = () => ({
+const removeSuccess = file => ({
   type: REMOVE_SUCCESS,
+  file,
 })
 
 // selectors
 export const getRequestStatus = state => state.files.isFetching
+export const getFileError = state => state.files.error
 
 // thunked actions
 export const uploadFile = (file, type, fragmentId) => dispatch => {
   dispatch(uploadRequest(type))
-  return request('/aws', createFileData(file, type, fragmentId))
-    .then(r => {
+  return request('/aws', createFileData(file, type, fragmentId)).then(
+    r => {
       dispatch(uploadSuccess())
       return r
-    })
-    .catch(err => dispatch(uploadFailure(err.message)))
+    },
+    error => {
+      dispatch(uploadFailure(error))
+      throw error
+    },
+  )
 }
 
 export const deleteFile = fileId => dispatch => {