fix(register): show message on uploading invalid image

Satellite-im · Mar 17, 2022 · 7e68620 · 7e68620
1 parent f026544
commit 7e68620
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/components/views/files/upload/Upload.less b/components/views/files/upload/Upload.less
@@ -38,7 +38,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    cursor: pointer;
     margin: @large-spacing 0;
   }
 

diff --git a/components/views/user/create/Create.html b/components/views/user/create/Create.html
@@ -10,7 +10,7 @@
                 </div>
                 <div class="column align">
                     <TypographyText class="set-photo-title" :text="$t('user.registration.photo_text')" />
-                    <input ref="file" class="input-file" type="file" @change="selectImage" accept="image/*"></input>
+                    <input ref="file" class="input-file" type="file" @change="selectImage" accept="image/*" />
                     <InteractablesButton :action="() => $refs.file.click()" type="primary" size="small"
                         :text="$t('servers.create.photo_button')" outlined />
                 </div>

diff --git a/components/views/user/create/Create.vue b/components/views/user/create/Create.vue
@@ -40,9 +40,11 @@ export default Vue.extend({
      */
     async selectImage(e: Event) {
       const target = e.target as HTMLInputElement
+
       if (target.value === null) return
 
       const files = target.files
+
       if (!files?.length) return
 
       // stop upload if picture is too large for nsfw scan
@@ -59,7 +61,11 @@ export default Vue.extend({
         }
       } catch (err: any) {
         this.$Logger.log('error', 'file upload error')
+        this.error = this.$t('errors.sign_in.invalid_file') as string
+        this.resetFileInput()
+        return
       }
+
       this.error = ''
 
       const reader = new FileReader()
@@ -74,21 +80,30 @@ export default Vue.extend({
       reader.readAsDataURL(files[0])
     },
     /**
-     * @method setCroppedImage
+     * @method resetFileInput
      * @description
-     * @param image
      * @returns
      * @example
      */
-    setCroppedImage(image: string) {
-      this.croppedImage = image
-
+    resetFileInput() {
       const fileInputRef = this.$refs.file as HTMLInputElement
 
       if (fileInputRef) {
         fileInputRef.value = ''
       }
     },
+    /**
+     * @method setCroppedImage
+     * @description
+     * @param image
+     * @returns
+     * @example
+     */
+    setCroppedImage(image: string) {
+      this.croppedImage = image
+
+      this.resetFileInput()
+    },
     /**
      * @method confirm DocsTODO
      * @description

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -487,6 +487,9 @@ export default {
       file_too_large:
         'File is too large, please upload a file smaller than 8MB.',
     },
+    sign_in: {
+      invalid_file: 'Unable to upload, invalid file.',
+    },
     friends: {
       request_already_sent: 'You have already sent a request to this user',
       request_already_accepted: 'This user is already in your friends',