Merge pull request #3928 from Ocelot-Social-Community/allow-only-supported-file-formats

feat: 🍰 Allow Only Supported Image File Formats

webapp/components/ImageUploader/ImageUploader.spec.js

@@ -27,11 +27,18 @@ describe('ImageUploader.vue', () => {
       beforeEach(() => jest.useFakeTimers())
       const message = 'File upload failed'
       const fileError = { status: 'error' }
+      const unSupportedFileMessage =
+        'Please upload an image of file format : JPG , JPEG , PNG or GIF'
 
       it('shows an error toaster when verror is called', () => {
         wrapper.vm.onDropzoneError(fileError, message)
         expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message)
       })
+
+      it('shows an error toaster when unSupported file is uploaded', () => {
+        wrapper.vm.onUnSupportedFormat(fileError.status, unSupportedFileMessage)
+        expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, unSupportedFileMessage)
+      })
     })
   })
 })

webapp/components/ImageUploader/ImageUploader.vue

@@ -65,6 +65,7 @@ export default {
         url: () => '',
         maxFilesize: 5.0,
         previewTemplate: '<span class="no-preview" />',
+        acceptedFiles: '.png,.jpg,.jpeg,.gif',
       },
       cropper: null,
       file: null,
@@ -76,7 +77,20 @@ export default {
     onDropzoneError(file, message) {
       this.$toast.error(file.status, message)
     },
+
+    onUnSupportedFormat(status, message) {
+      this.$toast.error(status, message)
+    },
     initCropper(file) {
+      const supportedFormats = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
+
+      if (supportedFormats.indexOf(file.type) < 0) {
+        this.onUnSupportedFormat(
+          'error',
+          this.$t('contribution.teaserImage.errors.unSupported-file-format'),
+        )
+        return
+      }
       this.showCropper = true
       this.file = file
 

webapp/locales/de.json

@@ -214,6 +214,9 @@
     "success": "Gespeichert!",
     "teaserImage": {
       "cropperConfirm": "Bestätigen",
+      "errors": {
+        "unSupported-file-format": "Bitte lade ein Bild in den folgenden Formaten hoch: JPG, JPEG, PNG or GIF!"
+      },
       "supportedFormats": "Füge ein Bild im Dateiformat JPG, PNG oder GIF ein"
     },
     "title": "Titel"

webapp/locales/en.json

@@ -214,7 +214,10 @@
     "success": "Saved!",
     "teaserImage": {
       "cropperConfirm": "Confirm",
-      "supportedFormats": "Insert a picture of file format JPG , PNG or GIF"
+      "errors": {
+        "unSupported-file-format": "Please upload an image of file format: JPG, JPEG, PNG or GIF!"
+      },
+      "supportedFormats": "Insert a picture of file format JPG, PNG or GIF"
     },
     "title": "Title"
   },

webapp/locales/es.json

@@ -209,7 +209,7 @@
     "success": "¡Guardado!",
     "teaserImage": {
       "cropperConfirm": "Confirmar",
-      "supportedFormats": "Insertar una imagen de formato de archivo JPG, PNG o GIF"
+      "supportedFormats": "Insertar una imagen de formato de archivo JPG, PNG o GIF!"
     },
     "title": "Título"
   },

webapp/locales/fr.json

@@ -209,7 +209,7 @@
     "success": "Enregistré!",
     "teaserImage": {
       "cropperConfirm": "Confirmer",
-      "supportedFormats": "Insérer une image au format de fichier JPG, PNG ou GIF"
+      "supportedFormats": "Insérer une image au format de fichier JPG, PNG ou GIF!"
     },
     "title": "Titre"
   },

webapp/locales/it.json

@@ -215,7 +215,7 @@
     "success": null,
     "teaserImage": {
       "cropperConfirm": "Confermare",
-      "supportedFormats": "Inserisci un'immagine in formato file JPG, PNG o GIF"
+      "supportedFormats": "Inserisci un'immagine in formato file JPG, PNG o GIF!"
     },
     "title": null
   },

webapp/locales/nl.json

@@ -69,7 +69,7 @@
     "edit": "Bijdrage bewerken",
     "teaserImage": {
       "cropperConfirm": "Bevestigen",
-      "supportedFormats": "Voeg een afbeelding in met het bestandsformaat JPG, PNG of GIF"
+      "supportedFormats": "Voeg een afbeelding in met het bestandsformaat JPG, PNG of GIF!"
     }
   },
   "disable": {

webapp/locales/pl.json

@@ -120,7 +120,7 @@
     "success": "Zapisano!",
     "teaserImage": {
       "cropperConfirm": "Potwierdzać",
-      "supportedFormats": "Wstaw zdjęcie w formacie pliku JPG, PNG lub GIF"
+      "supportedFormats": "Wstaw zdjęcie w formacie pliku JPG, PNG lub GIF!"
     }
   },
   "delete": {

webapp/locales/pt.json

@@ -253,7 +253,7 @@
     "success": "Salvo!",
     "teaserImage": {
       "cropperConfirm": "Confirmar",
-      "supportedFormats": "Insira uma imagem do formato JPG, PNG ou GIF"
+      "supportedFormats": "Insira uma imagem do formato JPG, PNG ou GIF!"
     },
     "title": "Título"
   },

webapp/locales/ru.json

@@ -209,7 +209,7 @@
     "success": "Сохранено!",
     "teaserImage": {
       "cropperConfirm": "Подтвердить",
-      "supportedFormats": "Вставьте изображение файла формата JPG, PNG или GIF"
+      "supportedFormats": "Вставьте изображение файла формата JPG, PNG или GIF!"
     },
     "title": "Заголовок"
   },