validate image import and if pdf type

src/components/feature/FeatureAttachmentForm.vue

@@ -23,7 +23,6 @@
               :name="form.title.html_name"
               :id="form.title.id_for_label"
               v-model="form.title.value"
-              
             />
             <ul :id="form.title.id_for_error" class="errorlist">
               <li v-for="error in form.title.errors" :key="error">
@@ -46,6 +45,7 @@
             <input
               @change="onFileChange"
               type="file"
+              accept="application/pdf, image/jpeg, image/png"
               style="display: none"
               :name="form.attachment_file.html_name"
               :id="'attachment_file' + attachmentForm.dataKey"
@@ -118,21 +118,23 @@ export default {
     attachmentForm(newValue) {
       this.initForm(newValue);
     },
+    //* utilisation de watcher, car @change aurait un délai
     "form.title.value": function (newValue, oldValue) {
-      if (oldValue != ''){
-        if (newValue != oldValue){
+      if (oldValue != "") {
+        if (newValue != oldValue) {
           this.updateStore();
         }
       }
     },
     "form.info.value": function (newValue, oldValue) {
-       if (oldValue != ''){
-        if (newValue != oldValue){
+      if (oldValue != "") {
+        if (newValue != oldValue) {
           this.updateStore();
         }
       }
     },
   },
+
   methods: {
     initForm(attachmentForm) {
       for (let el in attachmentForm) {
@@ -152,10 +154,7 @@ export default {
         this.attachmentForm.dataKey
       );
       if (this.form.id.value)
-        this.$store.commit(
-          "feature/DELETE_ATTACHMENTS",
-          this.form.id.value
-        );
+        this.$store.commit("feature/DELETE_ATTACHMENTS", this.form.id.value);
     },
 
     updateStore() {
@@ -166,22 +165,54 @@ export default {
         attachment_file: this.form.attachment_file.value,
         info: this.form.info.value,
         fileToImport: this.fileToImport,
-      }
+      };
       this.$store.commit("feature/UPDATE_ATTACHMENT_FORM", data);
-      if (data.id){
-        this.$store.commit(
-          "feature/PUT_ATTACHMENTS",
-          data
-        );
+      if (data.id) {
+        this.$store.commit("feature/PUT_ATTACHMENTS", data);
       }
     },
 
+    validateImgFile(files, handleFile) {
+      let url = window.URL || window.webkitURL;
+      let image = new Image();
+      image.onload = function () {
+        handleFile(true);
+      };
+      image.onerror = function () {
+        handleFile(false);
+      };
+      image.src = url.createObjectURL(files);
+      URL.revokeObjectURL(image.src);
+    },
+
     onFileChange(e) {
+      // * read image file
       const files = e.target.files || e.dataTransfer.files;
-      if (!files.length) return;
-      this.fileToImport = files[0]; //* store file to import
-      this.form.attachment_file.value = files[0].name; //* add name to the form for display, in order to match format return from API
-      this.updateStore();
+
+      const _this = this; //* 'this' is different in onload function
+      function handleFile(isValid) {
+        if (isValid) {
+          _this.fileToImport = files[0]; //* store the file to post later
+          _this.form.attachment_file.value = files[0].name; //* add name to the form for display, in order to match format return from API
+          _this.updateStore();
+          _this.form.attachment_file.errors = [];
+        } else {
+          _this.form.attachment_file.errors.push(
+            "Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu."
+          );
+        }
+      }
+
+      if (files.length) {
+        //* exception for pdf
+        if (files[0].type === "application/pdf") {
+          handleFile(true);
+        } else {
+          this.form.attachment_file.errors = [];
+          //* check if file is an image and pass callback to handle file
+          this.validateImgFile(files[0], handleFile);
+        }
+      }
     },
 
     checkForm() {