diff --git a/DATA/data.csv b/DATA/data.csv
new file mode 100644
index 0000000000000000000000000000000000000000..7e0ad5d9b40e871292cc7a056793a3904d388f1b
--- /dev/null
+++ b/DATA/data.csv
@@ -0,0 +1,3 @@
+1,18.0,25.0,12.0
+2,12.0,12.0,24.0
+3,9.0,13.0,3.0
diff --git a/backend/server.js b/backend/server.js
index 269b4fcf9454d448fd986d519235c7fb9ecb991d..6d190420f10f0cf8f6bcddfb53c5b8547e033f52 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -29,6 +29,8 @@ function sendPoint(call, callback) {
 
 //Route the grpc function to the microservice
 function sendPointStream(call) {
+  console.log(call.request.modelid)
+  console.log(call.request.rows)
   http.get("http://localhost:8090/generatePointStream", res =>{
 
     res.on("data", data =>{
diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue
index 4b3227384063acc1fb4f9b6afc91671b26191ef3..f54bf2ec75b57790cd9ec7cc4d1a911e494d0aaf 100644
--- a/frontend/src/components/ScatterPlot.vue
+++ b/frontend/src/components/ScatterPlot.vue
@@ -85,6 +85,10 @@ export default {
         x: point.getX(),
         y: point.getY()
       });
+
+      if(this.dataPoints.length > 5){
+        return;
+      }
       this.plot();
     }
   },
diff --git a/frontend/src/components/gRPCProjectorClient.vue b/frontend/src/components/gRPCProjectorClient.vue
index d2024e175f7f80bb7db94877b81a56266862dd58..5e8352430eec67cdf6e7bbd598b411729f7d2d13 100644
--- a/frontend/src/components/gRPCProjectorClient.vue
+++ b/frontend/src/components/gRPCProjectorClient.vue
@@ -8,7 +8,8 @@
       transition="scale-transition"
       dismissible
       close-icon="mdi-delete"
-    >Cannot connect to server</v-alert>
+      >Cannot connect to server</v-alert
+    >
 
     <v-alert
       v-if="launched"
@@ -17,61 +18,113 @@
       transition="scale-transition"
       dismissible
       close-icon="mdi-delete"
-    >Connected to the server!</v-alert>
+      >Connected to the server!</v-alert
+    >
     <h1>Dapr grpc</h1>
     <h1 class="my-10">Check the developer console for the messages</h1>
 
     <v-layout row>
       <v-spacer></v-spacer>
 
-      <v-file-input show-size counter dense label="File input"></v-file-input>
+      <v-file-input
+        show-size
+        counter
+        dense
+        label="File input"
+        v-model="file"
+      ></v-file-input>
+      <v-btn color="primary" text @click="submitFiles">SUBMIT</v-btn>
       <v-spacer></v-spacer>
     </v-layout>
   </div>
 </template>
 
 <script>
-
-
-const { TrainingSet } = require("../generated/projector_pb");
+const { TrainingSet, TrainingSetRow } = require("../generated/projector_pb");
 const { ProjectorClient } = require("../generated/projector_grpc_web_pb");
-
+var os = require("os");
 export default {
   name: "gRPCProjectorClient",
 
   data() {
     return {
       succesAlert: false,
-      launched: false
+      launched: false,
+      file: null,
+      client: null,
     };
   },
 
   created: function () {
     //Setup the server
     const connectURL = "http://" + window.location.hostname + ":8080";
-    var client = new ProjectorClient(connectURL, null, null);
-    var param = new TrainingSet();
-
-    //Call the stream
-    var stream = client.getProjectionPoints(param);
-
-    stream.on("data", (response) => {
-      this.succesAlert = true;
-      this.launched = true;
-      this.$emit("newPoint", response);
-    });
-    
-    stream.on("error", (err) => {
-      this.succesAlert = false
-      this.launched = true;
-
-      console.log(
-        `Unexpected stream error: code = ${err.code}` +
-          `, message = "${err.message}"`
-      );
-    });
+    this.client = new ProjectorClient(connectURL, null, null);
   },
   methods: {
+    startStream(trainingSet) {
+      //Call the stream
+      var stream = this.client.getProjectionPoints(trainingSet);
+
+      stream.on("data", (response) => {
+        this.succesAlert = true;
+        this.launched = true;
+        this.$emit("newPoint", response);
+      });
+
+      stream.on("error", (err) => {
+        this.succesAlert = false;
+        this.launched = true;
+
+        console.log(
+          `Unexpected stream error: code = ${err.code}` +
+            `, message = "${err.message}"`
+        );
+      });
+    },
+    parseFile(lines) {
+      var dataRows = [];
+      for (var i = 0; i < lines.length - 1; i++) {
+        var hdvector = [];
+
+        var dataPoints = lines[i].split(",");
+        var trainingRow = new TrainingSetRow();
+        trainingRow.setId(i.toString());
+        dataPoints.forEach((el) => {
+          hdvector.push(parseFloat(el));
+        });
+        trainingRow.setHdvectorList(hdvector);
+
+        dataRows.push(trainingRow);
+      }
+
+      return dataRows;
+    },
+
+    submitFiles() {
+      //Start up normal connection
+      if (!this.file) {
+        console.log("there is no file.");
+        this.startStream(new TrainingSet());
+        return;
+      }
+
+      //Read in file
+      let reader = new FileReader();
+      reader.readAsText(this.file, "UTF-8");
+      reader.onload = (evt) => {
+
+        var tokens = evt.target.result.split(os.EOL);
+
+        //Create the set
+        var trainingSet = new TrainingSet();
+        trainingSet.setModelid("testComputer");
+
+        var rows = this.parseFile(tokens);
+        trainingSet.setRowsList(rows);
+
+        this.startStream(trainingSet);
+      };
+    },
   },
 };
 </script>
\ No newline at end of file