FIX Strip html tags from file upload error responses

client/lang/src/en.json

@@ -30,6 +30,10 @@
     "AssetAdmin.DROPZONE_SUCCESS_UPLOAD": "File uploaded",
     "AssetAdmin.DROPZONE_UPLOAD": "Upload",
     "AssetAdmin.EDIT": "Edit",
+    "AssetAdmin.ERROR_FILE_SIZE": "File size limit exceeded",
+    "AssetAdmin.ERROR_FILE_NOT_FOUND": "File cannot be found",
+    "AssetAdmin.ERROR_FILE_EXTENSION": "Extension is not allowed",
+    "AssetAdmin.ERROR_DEFAULT": "Something went wrong, please try again",
     "AssetAdmin.FILENAME": "Filename",
     "AssetAdmin.FILES": "Files",
     "AssetAdmin.FILE_MISSING": "File cannot be found",

client/src/components/UploadField/UploadField.js

@@ -6,6 +6,7 @@ import { inject } from 'lib/Injector';
 import CONSTANTS from 'constants/index';
 import fieldHolder from 'components/FieldHolder/FieldHolder';
 import fileShape from 'lib/fileShape';
+import getStatusCodeMessage from 'lib/getStatusCodeMessage';
 import * as uploadFieldActions from 'state/uploadField/UploadFieldActions';
 import * as modalActions from 'state/modal/ModalActions';
 import PropTypes from 'prop-types';
@@ -214,7 +215,15 @@ class UploadField extends Component {
   }
 
   handleFailedUpload(file, response) {
-    this.props.actions.uploadField.failUpload(this.props.id, file._queuedId, response);
+    const statusCodeMessage = file.xhr && file.xhr.status
+      ? getStatusCodeMessage(file.xhr.status)
+      : '';
+    this.props.actions.uploadField.failUpload(
+      this.props.id,
+      file._queuedId,
+      response,
+      statusCodeMessage
+    );
   }
 
   /**

client/src/components/UploadField/UploadFieldItem.scss

@@ -150,13 +150,12 @@ $uploadfield-item-label-height: 40px;
   color: white;
   background: $brand-danger;
   border-radius: 14px;
-  max-width: 25%;
+  max-width: 50%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-
 .uploadfield-item__complete-icon {
   line-height: 38px;
   padding: 11px 5px;

client/src/containers/Gallery/Gallery.js

@@ -19,6 +19,7 @@ import { withApollo } from 'react-apollo';
 import { SelectableGroup } from 'react-selectable';
 import GalleryDND from './GalleryDND';
 import configShape from 'lib/configShape';
+import getStatusCodeMessage from 'lib/getStatusCodeMessage';
 import MoveModal from '../MoveModal/MoveModal';
 import { inject } from 'lib/Injector';
 import PropTypes from 'prop-types';
@@ -435,7 +436,10 @@ class Gallery extends Component {
   }
 
   handleFailedUpload(fileXhr, response) {
-    this.props.actions.queuedFiles.failUpload(fileXhr._queuedId, response);
+    const statusCodeMessage = fileXhr.xhr && fileXhr.xhr.status
+      ? getStatusCodeMessage(fileXhr.xhr.status)
+      : '';
+    this.props.actions.queuedFiles.failUpload(fileXhr._queuedId, response, statusCodeMessage);
   }
 
   /**

client/src/lib/getStatusCodeMessage.js

@@ -0,0 +1,13 @@
+import i18n from 'i18n';
+
+/**
+ * Convert an http status code to a message
+ *
+ * @param { int } statusCode
+ */
+export default function getStatusCodeMessage(statusCode) {
+  if (statusCode === 413) {
+    return i18n._t('AssetAdmin.ERROR_FILE_SIZE', 'File size limit exceeded');
+  }
+  return i18n._t('AssetAdmin.ERROR_DEFAULT', 'Something went wrong, please try again');
+}

client/src/lib/tests/getStatusCodeMessage-test.js

@@ -0,0 +1,14 @@
+/* global jest, jasmine, describe, it, expect, beforeEach, FormData */
+
+import getStatusCodeMessage from '../getStatusCodeMessage';
+
+describe('getStatusCodeMessage', () => {
+  const defaultMessage = getStatusCodeMessage(999);
+  it('Has a default message', () => {
+    expect(defaultMessage.length > 0).toBe(true);
+  });
+  it('To have a different message for a 413 status code', () => {
+    const status413Message = getStatusCodeMessage(413);
+    expect(status413Message.length > 0 && status413Message !== defaultMessage).toBe(true);
+  });
+});

client/src/state/queuedFiles/QueuedFilesActions.js

@@ -17,18 +17,19 @@ export function addQueuedFile(file) {
  * Updates a queued file if it fails to upload.
  *
  * @param {String} queuedId - Temporary id assigned when this file was queued
+ * @param {Object|String} response
+ * @param {String} statusCodeMessage - message to use based on http status code
  */
-export function failUpload(queuedId, response) {
+export function failUpload(queuedId, response, statusCodeMessage) {
   return (dispatch) => {
     let message = response.message;
     if (response.errors && response.errors.length) {
       message = response.errors[0];
     }
 
-    // if we're given a string, then use it as the error message
     if (typeof response === 'string') {
       message = {
-        value: response,
+        value: statusCodeMessage || response,
         type: 'error',
       };
     }

client/src/state/uploadField/UploadFieldActions.js

@@ -33,15 +33,16 @@ export function setFiles(fieldId, files) {
  *
  * @param {String} fieldId - Identifier of UploadField
  * @param {String} queuedId - Temporary id assigned when this file was queued
+ * @param {Object|String} response
+ * @param {String} statusCodeMessage - message to use based on http status code
  */
-export function failUpload(fieldId, queuedId, response) {
+export function failUpload(fieldId, queuedId, response, statusCodeMessage) {
   return (dispatch) => {
     let message = response.message;
 
-    // if we're given a string, then use it as the error message
     if (typeof response === 'string') {
       message = {
-        value: response,
+        value: statusCodeMessage || response,
         type: 'error',
       };
     }