diff --git a/app/src/components/IpfsInfo.vue b/app/src/components/IpfsInfo.vue
index c0a4c7bc830a9fdac6def9c58fed3901a50df033..73651aa1530070372da7f1d5e4bd8ab5717c4f27 100644
--- a/app/src/components/IpfsInfo.vue
+++ b/app/src/components/IpfsInfo.vue
@@ -3,9 +3,15 @@
     <h1>IPFS View</h1>
     <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
-    <h2>ID: {{ id }}</h2>
-    <h2>Agent version: {{ agentVersion }}</h2>
-    <h3>Files : {{ fileContents }}</h3>
+    <!-- <h2>ID: {{ id }}</h2> -->
+    <!-- <h2>Agent version: {{ agentVersion }}</h2> -->
+    <!-- <h3>Files : {{ fileContents }}</h3> -->
+    <!-- <h3>Path: {{ path }}</h3> -->
+    <div v-if="path == 'ready'"></div>
+    <div v-else>
+      <img :src="'https://ipfs.io/ipfs/' + path" />
+    </div>
+    <!-- <img :src="'data:image/jpg;base64,' + output" /> -->
 
     <form>
       <input
@@ -28,8 +34,9 @@
 import VueIpfs from 'ipfs'
 const ipfs = VueIpfs.create()
 var node
-var file
-const fileContents = []
+var output
+var path = 'ready'
+//const fileContents = []
 
 //  The below code should create an IPFS node to add files to
 export default {
@@ -37,10 +44,12 @@ export default {
   data: function () {
     return {
       status: 'Connecting to IPFS...',
-      id: '',
-      agentVersion: '',
+      // id: '',
+      // agentVersion: '',
       selectedFile: null,
       fileContents: this.fileContents,
+      output: output,
+      path: path,
     }
   },
   mounted: function () {
@@ -52,11 +61,16 @@ export default {
       this.selectedFile = event.target.files[0]
     },
 
-    saveIPFS() {
-      file = node.files.write('/' + this.selectedFile.name, this.selectedFile, {
-        create: true,
-      })
-      return file
+    async saveIPFS() {
+      // file = node.files.write('/' + this.selectedFile.name, this.selectedFile, {
+      //   create: true,
+      // })
+      // return file
+      for await (const result of node.add(this.selectedFile)) {
+        //console.log(result.cid.string)
+        this.fileContents = result
+        // console.log(this.fileContents.path)
+      }
     },
 
     // getIPFS() {
@@ -66,11 +80,25 @@ export default {
     //   return fileContents
     // },
 
-    getIPFS() {
-      const resultPart = node.files.read('/')
-      fileContents.push(resultPart)
-      //  console.log(fileContents)
-      return fileContents
+    async getIPFS() {
+      // const resultPart = node.files.read('/')
+      // fileContents.push(resultPart)
+      // //  console.log(fileContents)
+      // return fileContents
+
+      for await (const newfile of node.get(this.fileContents.path)) {
+        console.log(newfile.path)
+        this.path = newfile.path
+      }
+
+      // const chunks = []
+      // for await (const chunk of node.cat(file)) {
+      //   chunks.push(chunk)
+      // }
+      // output = Buffer.concat(chunks).toString('base64')
+      // //output = this.fileContents.path
+      // file = this.fileContents.path
+      // console.log(Buffer.concat(chunks).toString('base64'))
     },
 
     async getIpfsNodeInfo() {
@@ -105,6 +133,10 @@ export default {
   margin-right: 1em;
 }
 
+img {
+  width: 50%;
+}
+
 h1 {
   font-size: 1em;
 }