Allows display of validation messages on assets

Fixes silverstripe#967 introduced in silverstripe#1138
blueo · Aug 8, 2023 · 29a61af · 29a61af
1 parent ec20c09
commit 29a61af
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/client/src/components/UploadField/UploadField.js b/client/src/components/UploadField/UploadField.js
@@ -234,7 +234,7 @@ class UploadField extends Component {
 
   handleFailedUpload(file, response) {
     const statusCodeMessage = file.xhr && file.xhr.status
-      ? getStatusCodeMessage(file.xhr.status)
+      ? getStatusCodeMessage(file.xhr.status, file.xhr)
       : '';
     this.props.actions.uploadField.failUpload(
       this.props.id,

diff --git a/client/src/containers/Gallery/Gallery.js b/client/src/containers/Gallery/Gallery.js
@@ -318,11 +318,11 @@ class Gallery extends Component {
     }
   }
 
-   /**
-   * Handler for when the user changes the sort order
-   *
-   * @param {string} value
-   */
+  /**
+  * Handler for when the user changes the sort order
+  *
+  * @param {string} value
+  */
   handleSort(value) {
     this.props.actions.queuedFiles.purgeUploadQueue();
     this.props.onSort(value);
@@ -436,7 +436,7 @@ class Gallery extends Component {
 
   handleFailedUpload(fileXhr, response) {
     const statusCodeMessage = fileXhr.xhr && fileXhr.xhr.status
-      ? getStatusCodeMessage(fileXhr.xhr.status)
+      ? getStatusCodeMessage(fileXhr.xhr.status, fileXhr.xhr)
       : '';
     this.props.actions.queuedFiles.failUpload(fileXhr._queuedId, response, statusCodeMessage);
   }
@@ -868,10 +868,10 @@ class Gallery extends Component {
           <div className="gallery__error flexbox-area-grow">
             <div className="gallery__error-message">
               <h3>
-                { i18n._t('AssetAdmin.DROPZONE_RESPONSE_ERROR', 'Server responded with an error.') }
+                {i18n._t('AssetAdmin.DROPZONE_RESPONSE_ERROR', 'Server responded with an error.')}
               </h3>
-              { errorMessage && <p>{ errorMessage }</p> }
-              { hasGraphQLErrors && graphQLErrors.map((error, index) => (
+              {errorMessage && <p>{errorMessage}</p>}
+              {hasGraphQLErrors && graphQLErrors.map((error, index) => (
                 // eslint-disable-next-line react/no-array-index-key
                 <p key={index}>{error}</p>
               ))}
@@ -897,10 +897,10 @@ class Gallery extends Component {
 
     const messages = (
       <div className="gallery_messages">
-        { errorMessage &&
+        {errorMessage &&
           <FormAlert value={errorMessage} type="danger" />
         }
-        { noticeMessage &&
+        {noticeMessage &&
           <FormAlert value={noticeMessage} type="success" />
         }
       </div>
@@ -972,7 +972,7 @@ class Gallery extends Component {
             </AssetDropzone>
           </SelectableGroup>
         </GalleryDND>
-        { this.props.loading && <Loading /> }
+        {this.props.loading && <Loading />}
         <MoveModal
           sectionConfig={this.props.sectionConfig}
           folderId={this.props.folderId}

diff --git a/client/src/lib/getStatusCodeMessage.js b/client/src/lib/getStatusCodeMessage.js
@@ -4,10 +4,19 @@ import i18n from 'i18n';
  * Convert an http status code to a message
  *
  * @param { int } statusCode
+ * @param { XMLHttpRequest } xhr - optional xhr response for custom validation messages
  */
-export default function getStatusCodeMessage(statusCode) {
+export default function getStatusCodeMessage(statusCode, xhr) {
   if (statusCode === 413) {
     return i18n._t('AssetAdmin.ERROR_FILE_SIZE', 'File size limit exceeded');
   }
+
+  // check for validation messages
+  if (statusCode === 403) {
+    if (xhr && typeof xhr.response === 'string') {
+      return xhr.response;
+    }
+  }
+
   return i18n._t('AssetAdmin.ERROR_DEFAULT', 'Something went wrong, please try again');
 }
diff --git a/client/src/lib/tests/getStatusCodeMessage-test.js b/client/src/lib/tests/getStatusCodeMessage-test.js
@@ -11,4 +11,21 @@ describe('getStatusCodeMessage', () => {
     const status413Message = getStatusCodeMessage(413);
     expect(status413Message.length > 0 && status413Message !== defaultMessage).toBe(true);
   });
+  it('To display validation messages for a 403 status code', () => {
+    const mockResponse = {
+      responseType: '',
+      response: 'Validation Message',
+    };
+    const status403Message = getStatusCodeMessage(403, mockResponse);
+    expect(status403Message.length > 0 && status403Message !== defaultMessage).toBe(true);
+    expect(status403Message).toBe('Validation Message');
+
+    const mockNonTextResponse = {
+      responseType: 'arraybuffer',
+      response: new ArrayBuffer(),
+    };
+    const status403NonTextMessage = getStatusCodeMessage(403, mockNonTextResponse);
+    expect(status403NonTextMessage.length > 0 && status403NonTextMessage === defaultMessage)
+      .toBe(true);
+  });
 });