Better error for 413

src/Squidex/Areas/Api/Controllers/Assets/AssetsController.cs

@@ -275,7 +275,7 @@ namespace Squidex.Areas.Api.Controllers.Assets
 
             if (formFile.Length > assetOptions.MaxSize)
             {
-                var error = new ValidationError($"File size cannot be longer than {assetOptions.MaxSize.ToReadableSize()}.");
+                var error = new ValidationError($"File cannot be bigger than {assetOptions.MaxSize.ToReadableSize()}.");
 
                 throw new ValidationException("Cannot create asset.", error);
             }

src/Squidex/app/shared/services/assets.service.spec.ts

@@ -16,6 +16,7 @@ import {
     AssetsDto,
     AssetsService,
     DateTime,
+    ErrorDto,
     RenameAssetDto,
     TagAssetDto,
     Version,
@@ -345,6 +346,29 @@ describe('AssetsService', () => {
                 new Version('2')));
     }));
 
+    it('should return proper error when upload failed with 403',
+        inject([AssetsService, HttpTestingController], (assetsService: AssetsService, httpMock: HttpTestingController) => {
+
+        let asset: AssetDto;
+        let error: ErrorDto;
+
+        assetsService.uploadFile('my-app', null!, user, now).subscribe(result => {
+            asset = <AssetDto>result;
+        }, e => {
+            error = e;
+        });
+
+        const req = httpMock.expectOne('http://service/p/api/apps/my-app/assets');
+
+        expect(req.request.method).toEqual('POST');
+        expect(req.request.headers.get('If-Match')).toBeNull();
+
+        req.flush({}, { status: 413, statusText: 'Payload too large' });
+
+        expect(asset!).toBeUndefined();
+        expect(error!).toEqual(new ErrorDto(413, 'Asset is too big.'));
+    }));
+
     it('should make put request to replace asset content',
         inject([AssetsService, HttpTestingController], (assetsService: AssetsService, httpMock: HttpTestingController) => {
 
@@ -377,6 +401,29 @@ describe('AssetsService', () => {
                 2048));
     }));
 
+    it('should return proper error when upload failed with 403',
+        inject([AssetsService, HttpTestingController], (assetsService: AssetsService, httpMock: HttpTestingController) => {
+
+        let asset: AssetReplacedDto;
+        let error: ErrorDto;
+
+        assetsService.replaceFile('my-app', '123', null!, version).subscribe(result => {
+            asset = (<Versioned<AssetReplacedDto>>result).payload;
+        }, e => {
+            error = e;
+        });
+
+        const req = httpMock.expectOne('http://service/p/api/apps/my-app/assets/123/content');
+
+        expect(req.request.method).toEqual('POST');
+        expect(req.request.headers.get('If-Match')).toBeNull();
+
+        req.flush({}, { status: 413, statusText: 'Payload too large' });
+
+        expect(asset!).toBeUndefined();
+        expect(error!).toEqual(new ErrorDto(413, 'Asset is too big.'));
+    }));
+
     it('should make put request to update asset',
         inject([AssetsService, HttpTestingController], (assetsService: AssetsService, httpMock: HttpTestingController) => {
 

src/Squidex/app/shared/services/assets.service.ts

@@ -5,15 +5,16 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
+import { Observable, throwError } from 'rxjs';
+import { catchError, filter, map, tap } from 'rxjs/operators';
 
 import {
     AnalyticsService,
     ApiUrlConfig,
     DateTime,
+    ErrorDto,
     HTTP,
     Model,
     pretifyError,
@@ -235,6 +236,13 @@ export class AssetsService {
                         throw 'Invalid';
                     }
                 }),
+                catchError((error: any) => {
+                    if (Types.is(error, HttpErrorResponse) && error.status === 413) {
+                        return throwError(new ErrorDto(413, 'Asset is too big.'));
+                    } else {
+                        return throwError(error);
+                    }
+                }),
                 tap(() => {
                     this.analytics.trackEvent('Asset', 'Uploaded', appName);
                 }),
@@ -301,6 +309,13 @@ export class AssetsService {
                         throw 'Invalid';
                     }
                 }),
+                catchError(error => {
+                    if (Types.is(error, HttpErrorResponse) && error.status === 413) {
+                        return throwError(new ErrorDto(413, 'Asset is too big.'));
+                    } else {
+                        return throwError(error);
+                    }
+                }),
                 tap(() => {
                     this.analytics.trackEvent('Analytics', 'Replaced', appName);
                 }),