create thumbnail after project creation

src/views/feature_type/Feature_type_detail.vue

@@ -71,12 +71,12 @@
                   <span class="label">{{ fileToImport.name }}</span>
                 </label>
                 <input
+                  @change="onFileChange"
                   type="file"
                   accept="application/json, .json, .geojson"
                   style="display: none"
                   name="json_file"
                   id="json_file"
-                  @change="onFileChange"
                 />
               </div>
               <button
@@ -198,6 +198,18 @@ export default {
   components: {
     ImportTask: ImportTask,
   },
+
+  data() {
+    return {
+      fileToImport: {
+        name: "Sélectionner un fichier GeoJSON ...",
+        size: 0,
+      },
+      showImport: false,
+      showExport: true,
+    };
+  },
+
   computed: {
     ...mapGetters(["project"]),
     ...mapState("feature", ["features"]),
@@ -209,11 +221,11 @@ export default {
           (el) => el.slug === this.$route.params.feature_type_slug
         );
       }
-      return null
+      return null;
+    },
+    lastFeatures: function () {
+      return this.features.slice(0, 5);
     },
-    lastFeatures: function() {
-      return this.features.slice(0, 5)
-    }
   },
 
   watch: {
@@ -224,27 +236,12 @@ export default {
     },
   },
 
-  data() {
-    return {
-      fileToImport: {
-        name: "Sélectionner un fichier GeoJSON ...",
-        size: 0,
-      },
-      showImport: false,
-      showExport: true,
-    };
-  },
-
   methods: {
     onFileChange(e) {
-      var files = e.target.files || e.dataTransfer.files;
+      const files = e.target.files || e.dataTransfer.files;
       if (!files.length) return;
-      this.fileToImport = files[0]; // todo : remove this value from state as it stored
-      this.$store.commit(
-        "feature_type/SET_FILE_TO_IMPORT",
-        this.fileToImport
-      );
-      //console.log(this.fileToImport)
+      this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
+      this.$store.commit("feature_type/SET_FILE_TO_IMPORT", this.fileToImport);
     },
 
     importGeoJson() {

src/views/feature_type/Feature_type_edit.vue

@@ -477,7 +477,7 @@ export default {
             const customForm = {
               label: { value: key || "" },
               name: { value: key || "" },
-              position: { value: this.dataKey }, // * use dataKey already incremented by addCustomForm
+              position: this.dataKey, // * use dataKey already incremented by addCustomForm
               field_type: { value: this.transformProperties(val) }, // * guessed from the type
               options: { value: [] }, // * not available in export
             };

src/views/project/Project_edit.vue

@@ -33,21 +33,16 @@
             id="form-input-file-logo"
             :src="form.thumbnail"
           />
-          <label
-            @click.prevent="selectImg"
-            class="ui icon button"
-            for="thumbnail"
+          <!--  @click.prevent="selectImg" -->
+          <label class="ui icon button" for="thumbnail"
             ><!-- // todo : send image to the backend and display it after -->
             <i class="file icon"></i>
-            <!-- // ? [...form.thumbnail.split("/")].pop() -->
             <span class="label">{{
-              form.thumbnail
-                ? form.thumbnail_name
-                : "Sélectionner une image ..."
+              form.thumbnail_name ? form.thumbnail_name : fileToImport.name
             }}</span>
           </label>
           <input
-            @change="processImgData"
+            @change="onFileChange"
             class="file-selection"
             type="file"
             accept="image/jpeg, image/png"
@@ -174,10 +169,14 @@ export default {
     return {
       action: "create",
       level_permissions_choices: [
-        {name: "Utilisateur anonyme", value: "anonymous"},
-        {name: "Utilisateur connecté", value: "logged_user"},
-        {name: "Contributeur", value: "contributor"},
+        { name: "Utilisateur anonyme", value: "anonymous" },
+        { name: "Utilisateur connecté", value: "logged_user" },
+        { name: "Contributeur", value: "contributor" },
       ],
+      fileToImport: {
+        name: "Sélectionner une image ...",
+        size: 0,
+      },
       form: {
         title: "",
         slug: "",
@@ -188,8 +187,8 @@ export default {
         thumbnail: require("@/assets/img/default.png"), // todo : utiliser l'image par défaut
         thumbnail_name: "", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
         creator: null,
-        access_level_pub_feature: {name: "", value: ""},
-        access_level_arch_feature: {name: "", value: ""},
+        access_level_pub_feature: { name: "", value: "" },
+        access_level_arch_feature: { name: "", value: "" },
         archive_feature: 0,
         delete_feature: 0,
         nb_features: 0,
@@ -225,30 +224,54 @@ export default {
       filename = filename.substr(0, len) + (n.length > len ? "[...]" : "");
       return filename + "." + ext;
     },
-    processImgData(e) {
-      // * read image file
-      const file = e.target.files[0];
-      if (file) {
-        this.form.thumbnail_name = file.name;
-      }
 
-      let reader = new FileReader();
-      let _this = this;
+    goBack() {
+      const routerHistory = this.$router.options.routerHistory;
+      this.$router.push(routerHistory[routerHistory.length - 1] || "/");
+    },
+
+    onFileChange(e) {
+      // * read image file
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files.length) return; //* abort if no file
+      this.fileToImport = files[0]; //* stock the file to post later
+      let reader = new FileReader(); //* read the file to display in the page
+      let _this = this; //* this will be different in onload function
       reader.onload = function (e) {
         _this.form.thumbnail = e.target.result;
       };
-
-      reader.readAsDataURL(file);
-      // todo : send file to the back (?) (not in base64)
-    },
-    selectImg() {
-      // * call click on hidden input field
-      document.getElementsByClassName("file-selection")[0].click();
+      reader.readAsDataURL(this.fileToImport);
     },
 
-    goBack() {
-      const routerHistory = this.$router.options.routerHistory;
-      this.$router.push(routerHistory[routerHistory.length - 1] || "/");
+    // todo : send file to the back
+    postProjectThumbnail(projectSlug) {
+      //* send img to the backend when feature_type is created
+      if (this.fileToImport.size > 0) {
+        var formData = new FormData();
+        formData.append("file", this.fileToImport);
+        let url =
+          process.env.VUE_APP_DJANGO_API_BASE +
+          "projects/" +
+          projectSlug +
+          "/thumbnail/";
+        return axios
+          .post(url, formData, {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          })
+          .then((response) => {
+            console.log("postProjectThumbnail", response);
+            if (response && response.status === 200) {
+              //dispatch("GET_IMPORTS", feature_type_slug);
+              console.log("SUCCESS");
+            }
+            return response;
+          })
+          .catch((error) => {
+            throw error;
+          });
+      }
     },
 
     async postForm() {
@@ -270,11 +293,12 @@ export default {
         .post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
         .then((response) => {
           console.log(response);
-          if (response && response.status === 201) {
-            this.$store.commit("ADD_PROJECT", response.data)
-            this.$router.push("/")
-            // todo : send thumbnail after
+          if (response && response.status === 201 && response.data) {
+            this.$store.commit("ADD_PROJECT", response.data);
+            this.$router.push("/");
+            // todo : send thumbnail after feature_type was created
             //postProjectThumbnail()
+            this.postProjectThumbnail(response.data.slug);
           }
         })
         .catch((error) => {
@@ -283,6 +307,7 @@ export default {
       console.log("POST this data : ", projectData);
     },
   },
+
   created() {
     this.definePageType();
     if (this.action !== "create") {