add import json

src/views/feature_type/Feature_type_detail.vue

@@ -64,21 +64,17 @@
             Importer des signalements
           </div>
           <div :class="['content', { active: showImport }]">
-            <form
+            <div
               id="form-import-features"
-              action="{% url 'geocontrib:import_from_geojson' slug=project.slug feature_type_slug=feature_type.slug %}"
-              method="post"
-              enctype="multipart/form-data"
               class="ui form"
             >
               <div class="field">
                 <label
-                  @click="importGeoJson"
                   class="ui icon button"
                   for="json_file"
                 >
                   <i class="file icon"></i>
-                  <span class="label">Sélectionner un fichier GeoJSON ...</span>
+                  <span class="label">{{filenameToImport.name}}</span>
                 </label>
                 <input
                   type="file"
@@ -86,14 +82,14 @@
                   style="display: none"
                   name="json_file"
                   id="json_file"
+                  @change="onFileChange"
                 />
               </div>
-              // todo import file
-              <button type="submit" class="ui fluid teal icon button">
+              <button @click="importGeoJson" class="ui fluid teal icon button">
                 <i class="upload icon"></i> Lancer l'import
               </button>
-              <ImportTask v-if="dataImport" :data="dataImport"/>
-            </form>
+              <ImportTask v-if="dataImport.length" :data="dataImport"/>
+            </div>
           </div>
           <div
             @click="showExport = !showExport"
@@ -204,6 +200,8 @@ export default {
 
   data() {
     return {
+      filenameToImport: {name: "Sélectionner un fichier GeoJSON ..."},
+      fileToImport: {},
       showImport: false,
       showExport: true,
       dataImport: [],
@@ -211,11 +209,39 @@ export default {
   },
 
   methods: {
+    onFileChange(e) {
+      var files = e.target.files || e.dataTransfer.files;
+      if (!files.length)
+        return;
+      // this.fileToImport = files[0]
+      this.filenameToImport = files[0]
+    },
     toggleImport() {
       console.log("toggleImport");
+
     },
     importGeoJson() {
       console.log("Comment faire pour importer le geoJson ?");
+      console.log(this.$route.params);
+
+      // POST ICI 
+      // path('projet/<slug:slug>/type-signalement/<slug:feature_type_slug>/importer-geojson/',
+      // ImportFromGeoJSON.as_view(), name='import_from_geojson'),
+      var formData = new FormData();
+      var jsonFile = document.querySelector('#json_file');
+      formData.append("image", jsonFile);
+      let url = process.env.DOMAIN + 'projet/' + this.$route.params.slug + '/ype-signalement/'+this.$route.params.feature_type_slug + '/importer-geojson/' ;
+      axios.post(url, formData, { headers: {
+          'Content-Type': 'multipart/form-data'
+          }
+        })
+        .then((response) => {
+          console.log(response.data)
+        })
+        .catch(err => {
+          console.log(err)
+        });
+
     },
     getImports(){
       let url = process.env.VUE_APP_DJANGO_API_BASE + 'import-tasks?feature_type_id=' + this.structure.feature_type;
@@ -228,6 +254,7 @@ export default {
         });
     }
   },
+
   created() {
     if (!this.project) {
       this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);