--- a/client/src/imports/Imports.vue	Tue Nov 20 17:04:06 2018 +0100
+++ b/client/src/imports/Imports.vue	Tue Nov 20 17:37:30 2018 +0100
@@ -2,9 +2,9 @@
     <div>
         <h4>Import soundingresults</h4>
         <hr class="mr-auto ml-auto mb-0 w-90">
-        <div v-if="editState" class="p-3">
+        <div v-if="editState" class="ml-auto mr-auto mt-4 w-90">
             <div class="d-flex flex-row input-group mb-4">
-                <div class="">
+                <div class="offset-r">
                     <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label>
                 </div>
                 <input
@@ -18,12 +18,12 @@
                 >
             </div>
             <div class="d-flex flex-row input-group mb-4">
-                <div class="">
+                <div class="offset-r">
                     <label class="label-text" for="importdate" id="importdatelabel">Date</label>
                 </div>
                 <input
                     id="importdate"
-                    type="date"
+                    type="text"
                     class="form-control"
                     placeholder="Date of import"
                     aria-label="bottleneck"
@@ -32,7 +32,7 @@
                 >
             </div>
             <div class="d-flex flex-row input-group mb-4">
-                <div class="">
+                <div class="offset-r">
                     <label class="label-text" for="depthreference">Depth reference</label>
                 </div>
                 <select v-model="depthReference" class="custom-select" id="depthreference">
@@ -43,7 +43,7 @@
                 </select>
             </div>
         </div>
-        <div class="uploadsection mr-auto ml-auto mt-4 mb-4">
+        <div class="w-90 ml-auto mr-auto mt-4 mb-4">
             <div v-if="uploadState" class="d-flex flex-row input-group mb-4">
                 <div class="custom-file">
                     <input
@@ -55,19 +55,25 @@
                     <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label>
                 </div>
             </div>
-            <div class="downloadbtn text-right">
+            <div class="buttons text-right">
                 <a
                     v-if="editState"
                     download="meta.json"
                     :href="dataLink "
-                    class="btn btn-outline-info mr-2"
-                >Generate Meta.json</a>
+                    class="btn btn-outline-info pull-left"
+                >Download Meta.json</a>
+                <button
+                    v-if="editState"
+                    @click="deleteTempData"
+                    class="btn btn-danger"
+                    type="button"
+                >Cancel Upload</button>
                 <button
                     :disabled="disableUpload"
-                    @click="submitUpload"
+                    @click="submit"
                     class="btn btn-info"
                     type="button"
-                >Upload!</button>
+                >{{uploadState?"Upload":"Confirm"}}</button>
             </div>
         </div>
     </div>
@@ -90,20 +96,81 @@
       importDate: "",
       uploadLabel: defaultLabel,
       uploadFile: null,
-      disableUpload: false
+      disableUpload: false,
+      token: null
     };
   },
   methods: {
+    initialState() {
+      this.importState = IMPORTSTATE.UPLOAD;
+      this.depthReference = "";
+      this.bottleneck = "";
+      this.importDate = "";
+      this.uploadLabel = defaultLabel;
+      this.uploadFile = null;
+      this.disableUpload = false;
+      this.token = null;
+    },
     fileSelected(e) {
       const files = e.target.files || e.dataTransfer.files;
       if (!files) return;
       this.uploadLabel = files[0].name;
       this.uploadFile = files[0];
     },
-    submitUpload() {
+    deleteTempData() {
+      HTTP.delete("/imports/soundingresult-upload/" + this.token, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token")
+        }
+      })
+        .then(() => {
+          this.initialState();
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    submit() {
       if (!this.uploadFile || this.disableUpload) return;
+      if (this.importState === IMPORTSTATE.UPLOAD) {
+        this.upload();
+      } else {
+        this.confirm();
+      }
+    },
+    upload() {
       let formData = new FormData();
       formData.append("soundingresult", this.uploadFile);
+      HTTP.post("/imports/soundingresult-upload", formData, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-Type": "multipart/form-data"
+        }
+      })
+        .then(response => {
+          const { bottleneck, date } = response.data.meta;
+          const depthReference = response.data.meta["depth-reference"];
+          this.importState = IMPORTSTATE.EDIT;
+          this.bottleneck = bottleneck;
+          this.depthReference = depthReference;
+          this.importDate = date;
+          this.token = response.data.token;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    confirm() {
+      let formData = new FormData();
+      formData.append("token", this.token);
       HTTP.post("/imports/soundingresult", formData, {
         headers: {
           "X-Gemma-Auth": localStorage.getItem("token"),
@@ -112,8 +179,10 @@
       })
         .then(() => {
           displayInfo({
-            title: "Import success"
+            title: "Import",
+            message: "Successfully imported " + this.bottleneck
           });
+          this.initialState();
         })
         .catch(error => {
           const { status, data } = error.response;
@@ -171,8 +240,11 @@
 </script>
 
 <style lang="sass" scoped>
-.uploadsection
-  width: 90%
+.offset-r
+  margin-right: $large-offset
+
+.buttons button
+  margin-left: $offset !important
 
 .label-text
   width: 10rem