diff --git a/src/components/feature/FeatureAttachmentForm.vue b/src/components/feature/FeatureAttachmentForm.vue index 83343c7935dab9d69dee36ccbde5b2315927da43..eb7f1aa25b5de25e34e80ea718e26d63373efe01 100644 --- a/src/components/feature/FeatureAttachmentForm.vue +++ b/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() {