FIX Show correct error message instead of successful message if file …

…exceeding maximum file size

client/src/components/PreviewImageField/PreviewImageField.js

@@ -219,6 +219,12 @@ class PreviewImageField extends Component {
    * @param {object} progress
    */
   handleUploadProgress(file, progress) {
+    let timer;
+    clearTimeout(timer);
+    if (file && file.status === 'uploading') {
+      timer = setTimeout(() => this.handleUploadProgress(file, progress), 1000);
+      return;
+    }
     this.props.actions.previewField.updateFile(this.props.id, { progress });
   }
 
@@ -277,6 +283,7 @@ class PreviewImageField extends Component {
     }
 
     const { category, progress, message } = upload;
+    const errors = upload.errors ? upload.errors[0] : null;
     const preview = this.preview(category, upload, data);
     const image = <img alt="preview" src={preview} className="editor__thumbnail" />;
     const linkedImage = (data.url && !progress) ? (
@@ -302,7 +309,13 @@ class PreviewImageField extends Component {
           {message.value}
         </div>
       );
-    } else if (progress === 100) {
+    } else if (errors) {
+      messageBox = (
+        <div className={`preview-image-field__message preview-image-field__message--${errors.type}`}>
+          {errors.value}
+        </div>
+      );
+    } else if (progress === 100 && !errors) {
       messageBox = (
         <div className="preview-image-field__message preview-image-field__message--success">
           {i18n._t(

client/src/components/PreviewImageField/PreviewImageField.scss

@@ -97,3 +97,9 @@
   color: $white;
   background: $brand-success;
 }
+
+.preview-image-field__message--info {
+  color: $white;
+  background: $brand-primary;
+}
+

client/src/components/PreviewImageField/tests/PreviewImageField-test.js

@@ -208,4 +208,87 @@ describe('PreviewImageField', () => {
       expect(url).toBe('/logo.jpg?vid=456');
     });
   });
+
+  describe('handleUploadProgress()', () => {
+    it.each(
+      [
+        {
+          status: 'uploading',
+          resultStatus: 'success',
+          upload: {
+            category: 'image',
+            extension: 'png',
+            filename: 'test.png',
+          },
+
+        },
+        {
+          status: 'uploading',
+          resultStatus: 'error',
+          upload: {
+            category: 'text',
+            extension: 'txt',
+            filename: 'test.txt',
+            errors: [
+              {
+                code: 400,
+                type: 'error',
+                value: 'Filesize is too large, maximum 100 KB allowed',
+              }
+            ]
+          },
+          message: 'Filesize is too large, maximum 100 KB allowed',
+        },
+      ]
+    )('should wait before upload process will finished', ({ status, upload, resultStatus, message }, done) => {
+      const file = {
+        status
+      };
+      props.actions = {
+        previewField: {
+          updateFile: jest.fn((id, { progress }) => {
+            props.upload.progress = progress;
+            props.id = id;
+          })
+        },
+      };
+      props.upload = upload;
+      props.upload.progress = 0;
+
+      const item = ReactTestUtils.renderIntoDocument(
+        <PreviewImageField {...props} />
+      );
+
+      jest.useFakeTimers();
+
+      item.handleUploadProgress(file, 100);
+      file.status = resultStatus;
+
+      const asyncFunction = (callback) => {
+        setTimeout(() => {
+          callback();
+          }, 1001);
+      };
+
+      const callback = () => {
+        if (resultStatus === 'error') {
+          expect(props.id).toBe('Form_Test_Field');
+          expect(props.upload.progress).toBe(100);
+          expect(props.upload.category).toBe('text');
+          expect(props.upload.errors[0].code).toBe(400);
+          expect(props.upload.errors[0].type).toBe(resultStatus);
+          expect(props.upload.errors[0].value).toBe(message);
+          done();
+        } else {
+          expect(props.id).toBe('Form_Test_Field');
+          expect(props.upload.errors).toBe(undefined);
+          expect(props.upload.category).toBe('image');
+          expect(props.upload.progress).toBe(100);
+          done();
+        }
+      };
+      asyncFunction(callback);
+      jest.advanceTimersByTime(1001);
+    });
+  });
 });

tests/behat/features/replace-file.feature

@@ -45,3 +45,14 @@ Feature: Replace a file with a new file
     When I press the "Save" button
     Then the "Name" field should contain "document-v2.pdf"
       And I should not see a ".preview-image-field__message--success" element
+
+  @javascript
+  Scenario: I upload an image file exceeding maximum file size to replace a file
+    Given a maximum file size is "5k"
+    When I attach the file "file1.jpg" to dropzone "PreviewImage"
+    Then I should see a ".preview-image-field__message-button" element
+      And I should see a ".preview-image-field__message--success" element
+      And the "Name" field should contain "file1.jpg"
+    When I attach the file "file3.jpg" to dropzone "PreviewImage"
+    Then I should see a ".preview-image-field__message--error" element
+      And the "Name" field should contain "file1.jpg"

tests/behat/src/FixtureContext.php

@@ -7,6 +7,7 @@
 use Page;
 use PHPUnit\Framework\Assert;
 use SilverStripe\Assets\Image;
+use SilverStripe\Assets\Upload_Validator;
 use SilverStripe\BehatExtension\Context\FixtureContext as BaseFixtureContext;
 use SilverStripe\BehatExtension\Utility\StepHelper;
 
@@ -508,4 +509,15 @@ public function iScrollTheEditorDetailsPanelToTheTop()
         $script = "document.querySelector('.editor__details fieldset').scrollTo(0, 0);";
         $this->getMainContext()->getSession()->executeScript($script);
     }
+
+    /**
+     * Example: Given a maximum file size is 5k
+     *
+     * @Given /^a maximum file size is "([^"]+)"$/
+     * @param string $size Max file size
+     */
+    public function stepCreateMaximumFileSizeStep($size): void
+    {
+        Upload_Validator::config()->set('default_max_file_size', ['*' => $size]);
+    }
 }