[#163818577] Add error handling for non csv files

AndelaOSP · Mar 11, 2019 · 80605ea · 80605ea
1 parent e030b9b
commit 80605ea
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/_actions/assets.action.js b/src/_actions/assets.action.js
@@ -38,6 +38,7 @@ export const getAssetsAction = (pageNumber, limit, filters, status = '') => {
 
 export const uploadAssets = file => (dispatch) => {
  const formData = new FormData();
+
  formData.append('file', file[0]);
  dispatch(uploading(true));
  return axios

diff --git a/src/components/Assets/UploadAssetsComponent.jsx b/src/components/Assets/UploadAssetsComponent.jsx
@@ -1,12 +1,20 @@
 import React from 'react';
+import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { Progress } from 'semantic-ui-react';
 import Dropzone from 'react-dropzone';
+
 import { uploadStatus, StatusMessage } from './UploadStatus';
 import errorMessage from './UploadErrorMessages';
+
 import '../../_css/UploadAssets.css';
 
 class UploadAssets extends React.Component {
+ state = {
+ accepted: [],
+ rejected: []
+ };
+
  componentDidUpdate(prevProps) {
  if (this.props.downloadedFile !== prevProps.downloadedFile) {
  const link = document.createElement('a');
@@ -17,9 +25,14 @@ class UploadAssets extends React.Component {
  }
  }
 
- handleDrop = (files) => {
+ handleDrop = (accepted, rejected) => {
  this.resetUpload();
- this.props.uploadAssets(files);
+
+ this.setState({ accepted, rejected });
+
+ if (!isEmpty(accepted)) {
+ this.props.uploadAssets(accepted);
+ }
  };
 
  resetUpload = () => {
@@ -32,13 +45,14 @@ class UploadAssets extends React.Component {
  };
 
  render() {
+ const { rejected } = this.state;
  const { loading, success, error } = this.props;
- const showStatus = success || error;
+ const showStatus = success || error || !isEmpty(rejected);
 
  return (
  <div className="center-upload">
  <span className="failed-file">
- <a href="# " onClick={() => this.handleFileDownload('files/sample_import_file/')}>
+ <a href=" " onClick={() => this.handleFileDownload('files/sample_import_file/')}>
  Download the sample file
  </a>{' '}
  , fill the columns and upload it.
@@ -65,8 +79,8 @@ class UploadAssets extends React.Component {
 
  {showStatus && (
  <StatusMessage
- message={uploadStatus(success, error)}
- className={success.fail || error ? 'error-status' : 'success-status'}
+ message={uploadStatus(success, error, rejected)}
+ className={success.fail || (error || !isEmpty(rejected)) ? 'error-status' : 'success-status'}
  reset={this.resetUpload}
  />
  )}

diff --git a/src/components/Assets/UploadStatus.jsx b/src/components/Assets/UploadStatus.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { Icon } from 'semantic-ui-react';
 
@@ -8,12 +9,14 @@ export const StatusMessage = props => (
  </div>
 );
 
-export const uploadStatus = (success, error) => {
- if (success.fail || error) {
+export const uploadStatus = (success, error, rejected) => {
+ const errorMessage = !isEmpty(rejected) ? 'Only csv files can be imported' : success.fail;
+
+ if (success.fail || error || !isEmpty(rejected)) {
  return (
  <div>
  <Icon name="x icon" size="big" />
- {success.fail || error}
+ {errorMessage || error}
  </div>
  );
  }