Merge pull request #141 from kids-first/add-alert-failed-upload

💄 Add "Failed to upload file" alert

Author: XuTheBunny

src/components/FileUpload/FileUploadTarget.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 const FileUploadTarget = props => {
   const {
     className,
+    error,
     instructions,
     handleSelectedFile,
     handleDragOver,
@@ -47,15 +48,22 @@ const FileUploadTarget = props => {
         className="Button Button--default"
         onChange={handleSelectedFile}
       />
+      {error && error.graphQLErrors && (
+        <h4 className="text-red px-2">
+          Failed to upload: {error.graphQLErrors.map(err => err.message)}
+        </h4>
+      )}
     </form>
   );
 };
 
 FileUploadTarget.propTypes = {
   /** any additional classes that should be added to the container */
   className: PropTypes.string,
-  /** if cursor is currently dragging over the component
-  dragging: PropTypes.boolean,
+  /** if cursor is currently dragging over the component */
+  dragging: PropTypes.bool,
+  /** Errors from graphQL */
+  errors: PropTypes.object,
   /** add helpful instruction about how to drag and drop files */
   instructions: PropTypes.string,
   /** operation when component is dragged over */

src/containers/UploadContainer.js

@@ -45,6 +45,7 @@ const UploadContainer = props => {
       })
       .catch(err => {
         console.log(err);
+        alert('Failed to upload file.');
       });
   };
 
@@ -74,8 +75,9 @@ const UploadContainer = props => {
         },
       ]}
     >
-      {(createFile, {data}) => (
+      {(createFile, {data, error}) => (
         <FileUploadTarget
+          error={error}
           dragging={dragging}
           handleDragOver={handleDragOver}
           onDragEnter={handleDragEnter}