--- a/client/src/components/ImportWaterwayProfiles.vue	Wed Feb 06 11:20:23 2019 +0100
+++ b/client/src/components/ImportWaterwayProfiles.vue	Wed Feb 06 15:17:42 2019 +0100
@@ -10,11 +10,70 @@
       </h6>
       <div class="card-body stretches-card">
         <div class="w-95 ml-auto mr-auto mt-4 mb-4">
-          <div class="d-flex flex-row input-group mb-4">
-            <div class="flex-column w-100">
+          <div class="mb-4">
+            <div class="d-flex flex-row">
+              <div class="flex-column w-100">
+                <div class="flex-row text-left">
+                  <small class="text-muted"> <translate>URL</translate> </small>
+                </div>
+                <div class="w-100">
+                  <input class="form-control" type="url" v-model="url" />
+                </div>
+              </div>
+            </div>
+            <div v-if="!url" class="d-flex flex-row">
+              <small
+                ><translate class="text-danger"
+                  >Please enter a URL</translate
+                ></small
+              >
+            </div>
+            <div class="d-flex flex-row">
+              <div class="flex-column mt-3 mr-3 w-50">
+                <div class="flex-row text-left">
+                  <small class="text-muted">
+                    <translate>Featuretype</translate>
+                  </small>
+                </div>
+                <div class="w-100">
+                  <input
+                    class="form-control"
+                    type="text"
+                    v-model="featureType"
+                  />
+                </div>
+                <div v-if="!featureType" class="d-flex flex-row">
+                  <small
+                    ><translate class="text-danger"
+                      >Please enter a Featuretype</translate
+                    ></small
+                  >
+                </div>
+              </div>
+              <div class="flex-column mt-3 w-50">
+                <div class="flex-row text-left">
+                  <small class="text-muted">
+                    <translate>SortBy</translate>
+                  </small>
+                </div>
+                <div class="w-100">
+                  <input class="form-control" type="text" v-model="sortBy" />
+                </div>
+                <div v-if="!sortBy" class="d-flex flex-row">
+                  <small
+                    ><translate class="text-danger"
+                      >Please enter SortBy</translate
+                    ></small
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="d-flex flex-row text-left">
+            <div class="mt-3 mb-3 flex-column w-100">
               <div class="custom-file">
                 <input
-                  accept=".zip"
+                  accept=".csv"
                   type="file"
                   @change="fileSelected"
                   class="custom-file-input"
@@ -62,12 +121,16 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 
-import { displayInfo } from "@/lib/errors.js";
+import { displayError, displayInfo } from "@/lib/errors.js";
+import { HTTP } from "@/lib/http";
 
 export default {
   name: "importwaterwayprofiles",
   data() {
     return {
+      url: "",
+      sortBy: "hydro_scamin",
+      featureType: "ws-wamos:ienc_wtwprf",
       disableUploadButton: false,
       uploadLabel: this.$gettext("choose file to upload"),
       uploadFile: null
@@ -81,10 +144,38 @@
       this.uploadFile = files[0];
     },
     submit() {
-      displayInfo({
-        title: this.$gettext("Import"),
-        message: this.$gettext("under construction")
-      });
+      if (!this.url || !this.featureType || !this.sortBy || !this.uploadFile)
+        return;
+      let formData = new FormData();
+      formData.append("wp", this.uploadFile);
+      formData.append("url", this.url);
+      formData.append("feature-type", this.featureType);
+      formData.append("sort-by", this.sortBy);
+      HTTP.post("/imports/wp", formData, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-Type": "multipart/form-data"
+        }
+      })
+        .then(() => {
+          displayInfo({
+            title: this.$gettext("Import"),
+            message: this.$gettext(
+              this.uploadLabel + this.$gettext(" was successfully uploaded.")
+            )
+          });
+          this.url = "";
+          this.uploadFile = null;
+          this.uploadLabel = this.$gettext("choose file to upload");
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          const messages = data.messages ? data.messages.join(", ") : "";
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${messages}`
+          });
+        });
     }
   },
   components: {