added textarea to capture path

app/src/components/IpfsInfo.vue

@@ -24,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>
@@ -36,6 +38,7 @@ const ipfs = VueIpfs.create()
 var node
 var output
 var path = 'ready'
+var copytext = ''
 //const fileContents = []
 
 //  The below code should create an IPFS node to add files to
@@ -50,6 +53,7 @@ export default {
       fileContents: this.fileContents,
       output: output,
       path: path,
+      copytext: copytext,
     }
   },
   mounted: function () {
@@ -57,22 +61,29 @@ export default {
     this.getIpfsNodeInfo()
   },
   methods: {
+    async getIpfsNodeInfo() {
+      try {
+        // Await for ipfs node instance.
+        node = await ipfs
+        //console.log(ipfs)
+        // Call ipfs `id` method.
+        // Returns the identity of the Peer.
+        const { agentVersion, id } = await node.id()
+        this.agentVersion = agentVersion
+        this.id = id
+        // Set successful status text.
+        this.status = 'Connected to IPFS 😊'
+      } catch (err) {
+        // Set error status text.
+        this.status = `Error: ${err}`
+      }
+    },
+
     onFileSelected(event) {
       this.selectedFile = event.target.files[0]
       // this.saveIPFS()
     },
 
-    copyClipBoard() {
-      /* Get the text field */
-      var copyText = 'https://ipfs.io/ipfs/' + this.path
-
-      /* Copy the text inside the text field */
-      document.execCommand('copy')
-      console.log(copyText)
-      /* Alert the copied text */
-      // alert('Copied the text: ' + copyText)
-    },
-
     async saveIPFS() {
       for await (const result of node.add(this.selectedFile)) {
         //console.log(result.cid.string)
@@ -87,26 +98,15 @@ export default {
       for await (const newfile of node.get(this.fileContents.path)) {
         // console.log(newfile.path)
         this.path = newfile.path
-        this.copyClipBoard()
+        this.copyClipBoard(this.path)
       }
     },
 
-    async getIpfsNodeInfo() {
-      try {
-        // Await for ipfs node instance.
-        node = await ipfs
-        //console.log(ipfs)
-        // Call ipfs `id` method.
-        // Returns the identity of the Peer.
-        const { agentVersion, id } = await node.id()
-        this.agentVersion = agentVersion
-        this.id = id
-        // Set successful status text.
-        this.status = 'Connected to IPFS 😊'
-      } catch (err) {
-        // Set error status text.
-        this.status = `Error: ${err}`
-      }
+    copyClipBoard(e) {
+      this.copytext = 'https://ipfs.io/ipfs/' + e
+      //  copyText.select()
+      // document.execCommand('copy')
+      console.log(copytext)
     },
   },
 }

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>