Import attachment file

src/components/feature/FeatureAttachmentForm.vue

@@ -34,27 +34,24 @@
           <div class="required field">
             <label>Fichier (PDF, PNG, JPEG)</label>
             <!-- // todo : mettre en place la sélection de fichier -->
-            <label
-              @click="selectFile"
-              class="ui icon button"
-              :for="form.attachment_file.id_for_label"
-            >
+            <!--  @click="selectFile" -->
+            <label class="ui icon button" for="attachment_file">
               <i class="file icon"></i>
               <span v-if="form.attachment_file.value" class="label">{{
                 form.attachment_file.value
               }}</span>
-              <span v-else class="label">Sélectionner un fichier ...</span>
+              <span v-else class="label">Sélectionner un fichier ... </span>
             </label>
-            <!-- // todo: récupérer la valeur :accept="IMAGE_FORMAT" -->
-            <!-- @change="processImgData" -->
             <input
+              @change="onFileChange"
               type="file"
               style="display: none"
               :name="form.attachment_file.html_name"
-              class="image_file"
-              :id="form.attachment_file.id_for_label"
-              @change="updateStore"
+              id="attachment_file"
             />
+
+            <!-- // todo: récupérer la valeur :accept="IMAGE_FORMAT" -->
+            <!-- @change="processImgData" -->
             {{ form.attachment_file.errors }}
           </div>
         </div>
@@ -81,6 +78,7 @@ export default {
 
   data() {
     return {
+      fileToImport: null,
       form: {
         title: {
           errors: null,
@@ -94,7 +92,6 @@ export default {
         },
         attachment_file: {
           errors: null,
-          id_for_label: "titre",
           html_name: "titre",
           label: "Titre",
           value: "",
@@ -116,9 +113,13 @@ export default {
 
   methods: {
     initForm(attachmentForm) {
+      console.log("initForm");
       for (let el in attachmentForm) {
         if (el && this.form[el]) {
-          this.form[el].value = attachmentForm[el];
+          this.form[el].value =
+            el === "attachment_file"
+              ? attachmentForm[el].split("/").pop() //* keep only the file name
+              : attachmentForm[el];
         }
       }
     },
@@ -128,15 +129,24 @@ export default {
         this.attachmentForm.dataKey
       );
     },
-    selectFile() {},
     updateStore() {
       this.$store.commit("feature/UPDATE_ATTACHMENT_FORM", {
         dataKey: this.attachmentForm.dataKey,
         title: this.form.title.value,
         attachment_file: this.form.attachment_file.value,
         info: this.form.info.value,
+        fileToImport: this.fileToImport,
       });
     },
+    onFileChange(e) {
+      const files = e.target.files || e.dataTransfer.files;
+      console.log(e, files);
+      if (!files.length) return;
+      this.fileToImport = files[0];
+      this.form.attachment_file.value = files[0].name;
+      this.updateStore();
+      //this.$store.commit("feature_type/SET_FILE_TO_IMPORT", this.fileToImport);
+    },
   },
 
   mounted() {

src/store/modules/feature.js

@@ -58,9 +58,11 @@ const feature = {
       axios
         .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/`)
         .then((response) => {
-          const features = response.data.features;
-          commit("SET_FEATURES", features);
-          //dispatch("map/ADD_FEATURES", null, { root: true }); //todo: should check if map was initiated
+          if (response.status === 200 && response.data) {
+            const features = response.data.features;
+            commit("SET_FEATURES", features);
+            //dispatch("map/ADD_FEATURES", null, { root: true }); //todo: should check if map was initiated
+          }
         })
         .catch((error) => {
           throw error;
@@ -90,7 +92,9 @@ const feature = {
         axios
           .put(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${state.form.feature_id}/`, geojson)
           .then((response) => {
-            console.log(response, response.data)
+            if (response.status === 200 && response.data) {
+              console.log(response, response.data)
+            }
           })
           .catch((error) => {
             throw error;
@@ -99,8 +103,10 @@ const feature = {
         axios
           .post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/`, geojson)
           .then((response) => {
-            console.log(response, response.data)
-            dispatch("SEND_ATTACHMENTS", response.data.id)
+            if (response.status === 201 && response.data) {
+              console.log(response, response.data)
+              dispatch("SEND_ATTACHMENTS", response.data.id)
+            }
           })
           .catch((error) => {
             throw error;
@@ -109,11 +115,21 @@ const feature = {
     },
 
     SEND_ATTACHMENTS({ state }, featureId) {
-      for (let attachment of state.attachmentFormset) {
+      for (let attacht of state.attachmentFormset) {
+        let formdata = new FormData();
+        formdata.append("file", attacht.fileToImport, attacht.fileToImport.name);
+        const data = {
+          title: attacht.title,
+          info: attacht.info,
+        }
+        formdata.append("data", JSON.stringify(data));
         axios
-          .post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${featureId}/attachments/`, attachment)
+          .post(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}features/${featureId}/attachments/`, formdata)
           .then((response) => {
-            console.log(response, response.data)
+            if (response.status === 200 && response.data) {
+              console.log(response, response.data)
+              return "La pièce jointe a bien été ajouté"
+            }
           })
           .catch((error) => {
             throw error;