Skip to content
Snippets Groups Projects
UploadLayer.vue 12 KiB
Newer Older
Adam Procter's avatar
Adam Procter committed
<template>
Adam Procter's avatar
Adam Procter committed
  <div v-if="this.currentroute.name == 'Organise'">
    <div class="ipfsupload dropORG" id="dropContainer">
      <form>
        <input
          id="file"
          class="fileInput"
          type="file"
          name="fileInput"
          ref="fileInput"
          @change="onFileSelected"
        />
        <!--  -->
        <p>Drop media here to upload.</p>
Adam Procter's avatar
Adam Procter committed
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          width="50"
          height="50"
        >
          <g>
            <circle cx="6.5" cy="30.5" r="5.5" fill="grey" />
            <circle cx="40.5" cy="30.5" r="5.5" fill="grey" />
            <circle cx="17.5" cy="27.5" r="8.5" fill="grey" />
            <circle cx="28.5" cy="25.5" r="10.5" fill="grey" />
            <rect
              fill-rule="evenodd"
              clip-rule="evenodd"
              x="6"
              y="31"
              width="35"
              height="5"
              fill="grey"
            />
            <circle
              cx="9.5"
              cy="25.5"
              r="4.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="43.5"
              cy="25.5"
              r="4.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="20.5"
              cy="22.5"
              r="7.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="31.5"
              cy="20.5"
              r="9.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <rect x="9" y="23" width="35" height="6" fill="white" />
            <rect x="9" y="23" width="12" height="5" fill="white" />
            <rect x="18" y="21" width="9" height="6" fill="white" />
            <rect x="17" y="17" width="21" height="5" fill="white" />
            <rect x="21" y="18" width="10" height="4" fill="white" />
            <path
              d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z"
              fill="grey"
            />
          </g>
        </svg>
Adam Procter's avatar
Adam Procter committed
        <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>
  </div>
  <div v-else>
    <div class="ipfsupload dropList" id="dropContainer">
      <form>
        <input
          id="file"
          class="fileInput"
          type="file"
          name="fileInput"
          ref="fileInput"
          @change="onFileSelected"
        />
        <!--  -->
        <p>Drop media here to upload.</p>
Adam Procter's avatar
Adam Procter committed
        <svg
          class="icon"
          xmlns="http://www.w3.org/2000/svg"
          width="50"
          height="50"
        >
          <g>
            <circle cx="6.5" cy="30.5" r="5.5" fill="grey" />
            <circle cx="40.5" cy="30.5" r="5.5" fill="grey" />
            <circle cx="17.5" cy="27.5" r="8.5" fill="grey" />
            <circle cx="28.5" cy="25.5" r="10.5" fill="grey" />
            <rect
              fill-rule="evenodd"
              clip-rule="evenodd"
              x="6"
              y="31"
              width="35"
              height="5"
              fill="grey"
            />
            <circle
              cx="9.5"
              cy="25.5"
              r="4.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="43.5"
              cy="25.5"
              r="4.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="20.5"
              cy="22.5"
              r="7.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <circle
              cx="31.5"
              cy="20.5"
              r="9.5"
              fill="white"
              stroke="grey"
              stroke-width="2"
            />
            <rect x="9" y="23" width="35" height="6" fill="white" />
            <rect x="9" y="23" width="12" height="5" fill="white" />
            <rect x="18" y="21" width="9" height="6" fill="white" />
            <rect x="17" y="17" width="21" height="5" fill="white" />
            <rect x="21" y="18" width="10" height="4" fill="white" />
            <path
              d="M30.5303 15.4697C30.2374 15.1768 29.7626 15.1768 29.4697 15.4697L24.6967 20.2426C24.4038 20.5355 24.4038 21.0104 24.6967 21.3033C24.9896 21.5962 25.4645 21.5962 25.7574 21.3033L30 17.0607L34.2426 21.3033C34.5355 21.5962 35.0104 21.5962 35.3033 21.3033C35.5962 21.0104 35.5962 20.5355 35.3033 20.2426L30.5303 15.4697ZM30.75 28L30.75 16L29.25 16L29.25 28L30.75 28Z"
              fill="grey"
            />
          </g>
        </svg>
Adam Procter's avatar
Adam Procter committed
        <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>
Adam Procter's avatar
Adam Procter committed
  </div>
</template>

<script>
import VueIpfs from 'ipfs'
Adam Procter's avatar
Adam Procter committed
import Router from '@/router'
Adam Procter's avatar
Adam Procter committed
const ipfs = VueIpfs.create()
var node
var output
var path = 'ready'
var copytext = ''
Adam Procter's avatar
Adam Procter committed
let dropArea
Adam Procter's avatar
Adam Procter committed

Adam Procter's avatar
Adam Procter committed
//const fileContents = []

//  The below code should create an IPFS node to add files to
export default {
Adam Procter's avatar
Adam Procter committed
  name: 'UploadLayer',
Adam Procter's avatar
Adam Procter committed

  props: {
    uploadready: Boolean,
    copyready: Boolean,
Adam Procter's avatar
Adam Procter committed
  },
  data: function () {
    return {
Adam Procter's avatar
Adam Procter committed
      currentroute: Router.currentRoute,
Adam Procter's avatar
Adam Procter committed
      status: 'Connecting to IPFS...',
Adam Procter's avatar
Adam Procter committed
      // id: '',
      // agentVersion: '',
Adam Procter's avatar
Adam Procter committed
      selectedFile: null,
      fileContents: this.fileContents,
      output: output,
      path: path,
      copytext: copytext,
    }
  },
Adam Procter's avatar
Adam Procter committed
  // computed: {
  //   ...mapState({
  //     myNodes: (state) => state.myNodes,
  //   }),
  // },
Adam Procter's avatar
Adam Procter committed
  mounted: function () {
    this.getIpfsNodeInfo()
Adam Procter's avatar
Adam Procter committed
    setTimeout(this.dropReady, 300)
Adam Procter's avatar
Adam Procter committed
  },

  watch: {
    uploadready: function (newVal) {
      // watch it
      //console.log(newVal)
Adam Procter's avatar
Adam Procter committed
      if (newVal == true) {
        document.getElementById('file').click()
      }
    },
    copyready: function (newVal2) {
      // watch it
      //console.log(newVal2)
      if (newVal2 == true) {
        document.getElementById('copyme').click()
      }
    },
Adam Procter's avatar
Adam Procter committed
  },
  methods: {
Adam Procter's avatar
Adam Procter committed
    dropReady() {
      dropArea = document.getElementById('dropContainer')
      ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
        dropArea.addEventListener(eventName, this.preventDefaults, false)
      })
Adam Procter's avatar
Adam Procter committed
      ;['dragenter', 'dragover'].forEach((eventName) => {
        dropArea.addEventListener(eventName, overState)
      })
      ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
        dropArea.addEventListener(eventName, leaveState)
      })
      ;['dragenter', 'dragover'].forEach((eventName) => {
        dropArea.addEventListener(eventName, overStateList)
      })
      ;['dragleave', 'dragend', 'drop'].forEach((eventName) => {
        dropArea.addEventListener(eventName, leaveStateList)
      })
Adam Procter's avatar
Adam Procter committed

      dropArea.addEventListener('drop', this.handleDrop, false)
Adam Procter's avatar
Adam Procter committed

      function overStateList() {
        if (document.getElementsByClassName('dropList')[0] != undefined) {
          document.getElementsByClassName('dropList')[0].className =
            'ipfsupload dropList dragover'
        }
Adam Procter's avatar
Adam Procter committed
      }

      function leaveStateList() {
        if (document.getElementsByClassName('dropList')[0] != undefined) {
          document.getElementsByClassName('dropList')[0].className =
            'ipfsupload dropList'
        }
Adam Procter's avatar
Adam Procter committed
      }

      function overState() {
        if (document.getElementsByClassName('dropORG')[0] != undefined) {
          document.getElementsByClassName('dropORG')[0].className =
            'ipfsupload dropORG dragover'
        }
Adam Procter's avatar
Adam Procter committed
      }

      function leaveState() {
        if (document.getElementsByClassName('dropORG')[0] != undefined) {
          document.getElementsByClassName('dropORG')[0].className =
            'ipfsupload dropORG'
        }
Adam Procter's avatar
Adam Procter committed
      }
Adam Procter's avatar
Adam Procter committed
    },
    preventDefaults(e) {
      e.preventDefault()
      e.stopPropagation()
    },

    handleDrop(e) {
      let dt = e.dataTransfer
      let files = dt.files
      this.handleFiles(files)
    },

    handleFiles(files) {
      // console.log(files)
      this.dropIPFS(files)

      // ;[...files].forEach(this.dropIPFS(files))
    },

Adam Procter's avatar
Adam Procter committed
    async getIpfsNodeInfo() {
      try {
        // Await for ipfs node instance.
        node = await ipfs
Adam Procter's avatar
Adam Procter committed

Adam Procter's avatar
Adam Procter committed
        // Call ipfs `id` method.
        // Returns the identity of the Peer.
        //  const { agentVersion, id } = await node.id()
        //  this.agentVersion = agentVersion
        //   this.id = id
Adam Procter's avatar
Adam Procter committed
        // Set successful status text.
        //  this.status = 'Connected to IPFS 😊'
Adam Procter's avatar
Adam Procter committed
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
Adam Procter's avatar
Adam Procter committed
        console.log(this.status)
Adam Procter's avatar
Adam Procter committed
      }
    },

    onFileSelected(event) {
      this.selectedFile = event.target.files[0]
      this.saveIPFS()
    },

    async saveIPFS() {
Adam Procter's avatar
Adam Procter committed
        this.fileContents = await node.add(this.selectedFile)
        this.getIPFS()
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
Adam Procter's avatar
Adam Procter committed
        console.log(this.status)
Adam Procter's avatar
Adam Procter committed
      }
    },

Adam Procter's avatar
Adam Procter committed
    async dropIPFS(files) {
      try {
        this.fileContents = await node.add(files)
Adam Procter's avatar
Adam Procter committed

        this.getIPFS(files[0].type)
Adam Procter's avatar
Adam Procter committed
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
        console.log(this.status)
      }
    },

Adam Procter's avatar
Adam Procter committed
    async getIPFS(type) {
      try {
        for await (const newfile of node.get(this.fileContents.path)) {
          // console.log(newfile.path)
          this.path = newfile.path
Adam Procter's avatar
Adam Procter committed
          this.copyClipBoard(this.path, type)
        }
      } catch (err) {
        // Set error status text.
        this.status = `Error: ${err}`
Adam Procter's avatar
Adam Procter committed
        console.log(this.status)
Adam Procter's avatar
Adam Procter committed
      }
    },

Adam Procter's avatar
Adam Procter committed
    copyClipBoard(e, type) {
      switch (true) {
        case type.includes('image/'):
          this.copytext = '![](https://ipfs.io/ipfs/' + e + ')'
          break
        case type.includes('audio/'):
          this.copytext =
            '<audio src="https://ipfs.io/ipfs/' + e + '" controls></audio>'
          break
        case type.includes('video/'):
          this.copytext =
            '<video src="https://ipfs.io/ipfs/' + e + '" controls></video>'
          break
        default:
          this.copytext = 'https://ipfs.io/ipfs/' + e
      }
Adam Procter's avatar
Adam Procter committed
    },

Adam Procter's avatar
Adam Procter committed
    copyClick() {
      document.getElementById('copyme').click()
    },
Adam Procter's avatar
Adam Procter committed

    copyDone() {
      var copyHash = document.getElementById('ipfshash')
      copyHash.select()

      copyHash.setSelectionRange(0, 99999) /*For mobile devices*/
      document.execCommand('copy')
Adam Procter's avatar
Adam Procter committed
      // this.$emit('upload-added')
Adam Procter's avatar
Adam Procter committed
      this.$emit('copy-done')
Adam Procter's avatar
Adam Procter committed
    },
  },
}
</script>

<style lang="css" scoped>
Adam Procter's avatar
Adam Procter committed
.icon {
  margin-top: -1.5em;
  margin-left: 4.5em;
}
.fileInput {
Adam Procter's avatar
Adam Procter committed
  display: none;
}
Adam Procter's avatar
Adam Procter committed

Adam Procter's avatar
Adam Procter committed
#dropContainer {
Adam Procter's avatar
Adam Procter committed
  border: 1px solid rgb(180, 180, 180);
  height: 100px;
  margin: 1em;
}

.dropList {
  padding: 1em;
  background-color: white;
}
.dropORG {
Adam Procter's avatar
Adam Procter committed
  margin: 0em;
  position: fixed;
Adam Procter's avatar
Adam Procter committed
  bottom: 0em;
  left: 27em;
  padding: 1em;
Adam Procter's avatar
Adam Procter committed
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(180, 180, 180);
  border-radius: 20px;
  height: 100px;
Adam Procter's avatar
Adam Procter committed
  background-color: white;
  outline: 2px dashed rgb(180, 180, 180);
  outline-offset: -10px;
}

.dragover {
  outline: 2px dashed black;
  outline-offset: -10px;
  background-color: rgb(180, 180, 180);
Adam Procter's avatar
Adam Procter committed

textarea {
  position: absolute;
Adam Procter's avatar
Adam Procter committed
  top: 10px;
  left: 0em;
Adam Procter's avatar
Adam Procter committed
  height: 0px;
  width: 0px;
  padding: 0px;
Adam Procter's avatar
Adam Procter committed
</style>