Merge branch 'redmine-issues/12049' into 'develop'

REDMINE_ISSUE-12049

See merge request geocontrib/geocontrib-frontend!114

src/views/feature/Feature_detail.vue

@@ -301,7 +301,7 @@
                     style="display: none"
                     name="attachment_file"
                     id="attachment_file"
-                    @change="getAttachmentFileData($event)"
+                    @change="onFileChange"
                   />
                 </div>
                 <div class="field">
@@ -314,6 +314,11 @@
                   {{ comment_form.title.errors }}
                 </div>
               </div>
+              <ul v-if="comment_form.attachment_file.errors" class="errorlist">
+                <li>
+                  {{ comment_form.attachment_file.errors }}
+                </li>
+              </ul>
               <button
                 @click="postComment"
                 type="button"
@@ -503,15 +508,50 @@ export default {
       this.comment_form.comment.value = null;
     },
 
-    getAttachmentFileData(evt) {
-      const files = evt.target.files || evt.dataTransfer.files;
-      const period = files[0].name.lastIndexOf(".");
-      const fileName = files[0].name.substring(0, period);
-      const fileExtension = files[0].name.substring(period + 1);
-      const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
-      this.comment_form.attachment_file.file = files[0];
-      this.comment_form.attachment_file.value = shortName;
-      this.comment_form.title.value = shortName;
+    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;
+
+      const _this = this; //* 'this' is different in onload function
+      function handleFile(isValid) {
+        if (isValid) {
+          const period = files[0].name.lastIndexOf(".");
+          const fileName = files[0].name.substring(0, period);
+          const fileExtension = files[0].name.substring(period + 1);
+          const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
+          _this.comment_form.attachment_file.file = files[0]; //* store the file to post later
+          _this.comment_form.attachment_file.value = shortName; //* for display
+          _this.comment_form.title.value = shortName;
+          _this.comment_form.attachment_file.errors = null;
+        } else {
+          _this.comment_form.attachment_file.errors =
+            "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.comment_form.attachment_file.errors = null;
+          //* check if file is an image and pass callback to handle file
+          this.validateImgFile(files[0], handleFile);
+        }
+      }
     },
 
     goBackToProject(message) {