Fix images size limit

3 files changed, 22 insertions, 2 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index 15f977e58..14293f14c 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -50,6 +50,10 @@ export class MyAccountSettingsComponent implements OnInit {
 
   changeAvatar () {
     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
+    if (avatarfile.size > this.maxAvatarSize) {
+      this.notificationsService.error('Error', 'This image is too large.')
+      return
+    }
 
     const formData = new FormData()
     formData.append('avatarfile', avatarfile)
@@ -59,7 +63,7 @@ export class MyAccountSettingsComponent implements OnInit {
         data => {
           this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.'))
 
-          this.user.account.avatar = data.avatar
+          this.user.updateAccountAvatar(data.avatar)
         },
 
         err => this.notificationsService.error(this.i18n('Error'), err.message)
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b4be2270f..60a0f26df 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -9,6 +9,7 @@ import {
 import { NSFWPolicyType } from '../../../../../shared/models/videos/nsfw-policy.type'
 import { Actor } from '@app/shared/actor/actor.model'
 import { Account } from '@app/shared/account/account.model'
+import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
 
 export type UserConstructorHash = {
   id: number,
@@ -84,6 +85,12 @@ export class User implements UserServerModel {
     this.updateComputedAttributes()
   }
 
+  updateAccountAvatar (newAccountAvatar: Avatar) {
+    this.account.avatar = newAccountAvatar
+
+    this.updateComputedAttributes()
+  }
+
   private updateComputedAttributes () {
     this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account)
   }
diff --git a/client/src/app/videos/+video-edit/shared/video-image.component.ts b/client/src/app/videos/+video-edit/shared/video-image.component.ts
index df6565857..25955baaa 100644
--- a/client/src/app/videos/+video-edit/shared/video-image.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-image.component.ts
@@ -2,6 +2,8 @@ import { Component, forwardRef, Input } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
+import { NotificationsService } from 'angular2-notifications'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-video-image',
@@ -27,7 +29,9 @@ export class VideoImageComponent implements ControlValueAccessor {
 
   constructor (
     private sanitizer: DomSanitizer,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private notificationsService: NotificationsService,
+    private i18n: I18n
   ) {}
 
   get videoImageExtensions () {
@@ -42,6 +46,11 @@ export class VideoImageComponent implements ControlValueAccessor {
     if (event.target.files && event.target.files.length) {
       const [ file ] = event.target.files
 
+      if (file.size > this.maxVideoImageSize) {
+        this.notificationsService.error(this.i18n('Error'), this.i18n('This image is too large.'))
+        return
+      }
+
       this.file = file
       this.propagateChange(this.file)
       this.updatePreview()