Merge branch 'IPFS2'

app/src/components/IpfsInfo.vue

@@ -4,8 +4,14 @@
     <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
     <h2>ID: {{ id }}</h2>
-    <h2>Agent version: {{ agentVersion }}</h2>
-    <h3>Files : {{ fileContents }}</h3>
+    <!-- <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
@@ -18,8 +24,10 @@
 
       <!-- <button @click="this.refs.selectedFile.click()">Choose File</button> -->
       <button type="button" @click="saveIPFS">Upload</button>
-
       <button type="button" @click="getIPFS">Get IPFS</button>
+
+      <!-- <textarea>https://ipfs.io/ipfs/{{ path }} </textarea> -->
+      <textarea v-model="copytext"></textarea>
     </form>
   </div>
 </template>
@@ -28,8 +36,10 @@
 import VueIpfs from 'ipfs'
 const ipfs = VueIpfs.create()
 var node
-var file
-const fileContents = []
+var output
+var path = 'ready'
+var copytext = ''
+//const fileContents = []
 
 //  The below code should create an IPFS node to add files to
 export default {
@@ -38,9 +48,12 @@ export default {
     return {
       status: 'Connecting to IPFS...',
       id: '',
-      agentVersion: '',
+      // agentVersion: '',
       selectedFile: null,
       fileContents: this.fileContents,
+      output: output,
+      path: path,
+      copytext: copytext,
     }
   },
   mounted: function () {
@@ -48,31 +61,6 @@ export default {
     this.getIpfsNodeInfo()
   },
   methods: {
-    onFileSelected(event) {
-      this.selectedFile = event.target.files[0]
-    },
-
-    saveIPFS() {
-      file = node.files.write('/' + this.selectedFile.name, this.selectedFile, {
-        create: true,
-      })
-      return file
-    },
-
-    // getIPFS() {
-    //   const resultPart = node.files.ls('/')
-    //   fileContents.push(resultPart)
-    //   //  console.log(fileContents)
-    //   return fileContents
-    // },
-
-    getIPFS() {
-      const resultPart = node.files.read('/')
-      fileContents.push(resultPart)
-      //  console.log(fileContents)
-      return fileContents
-    },
-
     async getIpfsNodeInfo() {
       try {
         // Await for ipfs node instance.
@@ -90,6 +78,36 @@ export default {
         this.status = `Error: ${err}`
       }
     },
+
+    onFileSelected(event) {
+      this.selectedFile = event.target.files[0]
+      // this.saveIPFS()
+    },
+
+    async saveIPFS() {
+      for await (const result of node.add(this.selectedFile)) {
+        //console.log(result.cid.string)
+        this.fileContents = result
+        // console.log(this.fileContents.path)
+        // node.swarm.peers().then((a) => console.log(a))
+        //   this.getIPFS()
+      }
+    },
+
+    async getIPFS() {
+      for await (const newfile of node.get(this.fileContents.path)) {
+        // console.log(newfile.path)
+        this.path = newfile.path
+        this.copyClipBoard(this.path)
+      }
+    },
+
+    copyClipBoard(e) {
+      this.copytext = 'https://ipfs.io/ipfs/' + e
+      //  copyText.select()
+      // document.execCommand('copy')
+      console.log(copytext)
+    },
   },
 }
 </script>
@@ -105,6 +123,10 @@ export default {
   margin-right: 1em;
 }
 
+img {
+  width: 50%;
+}
+
 h1 {
   font-size: 1em;
 }

app/src/experimental/ModeToolbar.vue

@@ -42,7 +42,13 @@ export default {
       if (mode == 'addNode') {
         this.$store.dispatch('addNode')
       }
+      if (mode == 'upload') {
+        //  onFileSelected(event) {
+        // this.selectedFile = event.target.files[0]
+        //  }
+      }
     },
+
     isActive(mode) {
       return this.mode === mode.name
     },

app/src/experimental/icons/Icon.vue

@@ -19,20 +19,20 @@ export default {
   props: {
     size: {
       type: Number,
-      default: 40
+      default: 40,
     },
     theme: {
       type: String,
-      default: 'light'
+      default: 'light',
     },
-    type: String
+    type: String,
   },
 
   computed: {
     style() {
       return {
         width: `${this.size}px`,
-        height: `${this.size}px`
+        height: `${this.size}px`,
       }
     },
     hasComponent() {
@@ -40,8 +40,8 @@ export default {
     },
     iconComponent() {
       return iconLibrary[this.type]
-    }
-  }
+    },
+  },
 }
 </script>