copyclipboard

doesn't always work / should have made branch but 

app/src/components/IpfsInfo.vue

@@ -3,7 +3,7 @@
     <h1>IPFS View</h1>
     <h3>Testing Only</h3>
     <h1>{{ status }}</h1>
-    <h2>ID: {{ id }}</h2>
+    <!-- <h2>ID: {{ id }}</h2> -->
     <!-- <h2>Agent version: {{ agentVersion }}</h2> -->
     <!-- <h3>Files : {{ fileContents }}</h3> -->
     <!-- <h3>Path: {{ path }}</h3> -->
@@ -47,7 +47,7 @@ export default {
   data: function () {
     return {
       status: 'Connecting to IPFS...',
-      id: '',
+      // id: '',
       // agentVersion: '',
       selectedFile: null,
       fileContents: this.fileContents,
@@ -104,7 +104,7 @@ export default {
 
     copyClipBoard(e) {
       this.copytext = 'https://ipfs.io/ipfs/' + e
-      //  copyText.select()
+      // copyText.select()
       // document.execCommand('copy')
       console.log(copytext)
     },

app/src/components/UploadLayer.vue

+<template>
+  <div class="ipfsupload">
+    <form>
+      <input
+        id="file"
+        class="fileInput"
+        type="file"
+        name="fileInput"
+        ref="fileInput"
+        @change="onFileSelected"
+      />
+      <!-- 
+      <button type="button" @click="saveIPFS">Upload</button>
+      <button type="button" @click="getIPFS">Get IPFS</button> -->
+      <!-- {{ uploadready }} -->
+      <textarea id="ipfshash" v-model="copytext"></textarea>
+      <div class="btn-row">
+        <button v-on:click.prevent="copyDone()" id="copyme" hidden>
+          Copy
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import VueIpfs from 'ipfs'
+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
+export default {
+  name: 'IpfsInfo',
+
+  props: {
+    uploadready: Boolean,
+    //  copyready: Boolean,
+  },
+  data: function () {
+    return {
+      status: 'Connecting to IPFS...',
+      // id: '',
+      // agentVersion: '',
+      selectedFile: null,
+      fileContents: this.fileContents,
+      output: output,
+      path: path,
+      copytext: copytext,
+    }
+  },
+  mounted: function () {
+    // console.log(VueIpfs)
+    this.getIpfsNodeInfo()
+  },
+
+  watch: {
+    uploadready: function (newVal) {
+      // watch it
+      console.log(newVal)
+      if (newVal == true) {
+        document.getElementById('file').click()
+      }
+    },
+  },
+  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()
+    },
+
+    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
+      this.copyready = true
+      setTimeout(this.copyClick, 5000)
+    },
+
+    copyClick() {
+      document.getElementById('copyme').click()
+    },
+
+    copyDone() {
+      var copyHash = document.getElementById('ipfshash')
+      copyHash.select()
+
+      copyHash.setSelectionRange(0, 99999) /*For mobile devices*/
+      document.execCommand('copy')
+      this.$emit('uploadAdded')
+    },
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.fileInput {
+  display: none;
+}
+
+textarea {
+  position: absolute;
+  top: 0px;
+  height: 0px;
+  width: 0px;
+  padding: 0px;
+}
+</style>

app/src/experimental/ModeToolbar.vue

@@ -43,6 +43,7 @@ export default {
         this.$store.dispatch('addNode')
       }
       if (mode == 'upload') {
+        this.$emit('uploadAdded')
         //  onFileSelected(event) {
         // this.selectedFile = event.target.files[0]
         //  }

app/src/router/index.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import List from '../views/List.vue'
 // import Oldhome from '../views/Oldhome'
-import Test from '../views/Test'
+//import Test from '../views/Test'
 
 Vue.use(VueRouter)
 
@@ -28,11 +28,11 @@ export const routes = [
     component: List,
   },
 
-  {
-    path: '/test',
-    name: 'IPFS Test',
-    component: Test,
-  },
+  // {
+  //   path: '/test',
+  //   name: 'IPFS Test',
+  //   component: Test,
+  // },
   // {
   //   path: '/oldhome',
   //   name: 'Old Home',

app/src/views/Home.vue

@@ -78,8 +78,13 @@
         <ModeToolbar
           @offlineTriggered="offlineTriggered()"
           @onlineTriggered="onlineTriggered()"
+          @uploadAdded="uploadAdded()"
         />
         <ViewToolbar />
+        <UploadLayer
+          v-bind:uploadready="uploadready"
+          @uploadAdded="uploadAdded()"
+        />
       </div>
     </div>
   </div>
@@ -90,6 +95,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OffLine from '@/components/OffLine'
+import UploadLayer from '@/components/UploadLayer'
 import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
 import OnBoard from '@/components/OnBoard.vue'
 import ModeToolbar from '@/experimental/ModeToolbar'
@@ -110,6 +116,7 @@ export default {
       clientset: false,
       listview: false,
       offline: false,
+      uploadready: false,
     }
   },
   computed: {
@@ -157,6 +164,12 @@ export default {
       this.elementHeight = offsetHeight
     },
 
+    uploadAdded() {
+      //
+      console.log('step one')
+      this.uploadready = !this.uploadready
+    },
+
     clientAdded() {
       this.clientset = !this.clientset
     },
@@ -187,6 +200,7 @@ export default {
     ConnectionsLayer,
     OnBoard,
     OffLine,
+    UploadLayer,
   },
 }
 </script>