diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue index 42a6d487f1f1eb874b01ae4d62d4f0a0d451bc98..e51eb240d8f348028254a963fe48ecc73ecc44b3 100644 --- a/src/views/feature/Feature_detail.vue +++ b/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) {