rename nftbapp

nftbapp/frontend-nftbapp/src/components/MyUpload.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>    
+    <v-form class="form" ref="form">
+      <v-text-field
+        v-model="tokenId"
+        label="Unique ID">
+      </v-text-field>
+
+      <input
+        type="file"
+        @change="captureFile" />
+
+      <v-btn @click="uploadImg" outline color="teal">UploadImg</v-btn>   
+      <img :src="uploadedImg()" width="300" />
+
+      <v-text-field
+        v-model="dataURI"   
+        label="Data URI"
+        required
+        ></v-text-field>
+
+      <v-btn @click="submit" outline color="teal">Submit</v-btn>      
+
+      <div v-show="isRegistered">
+        <v-btn @click="transferToCA" outline color="teal">TransferToCA</v-btn>              
+      </div>
+    </v-form>       
+
+    <PostAuction v-bind:tokenid="tokenId" v-bind:metadata="dataURI" /> 
+  </div>	
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import PostAuction from '@/components/PostAuction.vue'
+
+export default {
+  data() {
+    return {      
+      file: null,            
+      tokenId: null,      
+      isRegistered: false,            
+      dataURI: null      
+    }
+  }, 
+
+  components: {
+    PostAuction
+  },
+
+  computed: {
+    ...mapGetters('wallet', [
+      'klaytn',      
+    ])
+  },
+
+  async mounted() {
+    this.tokenId = this._getRandomInt(123456789,999999999)              
+  },
+
+  methods: {
+    _getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min
+    },
+    captureFile(event) {
+      event.stopPropagation()
+      this.file = event.target.files[0]
+    },
+
+    async uploadImg() {
+      if(!this.file){
+        alert("Please put the file on input.")
+        return
+      }      
+      
+      const formData = new FormData()
+      formData.append('file', this.file)
+      this.axios({
+        method: 'post',
+        baseURL: 'https://ipfs.infura.io:5001',
+        url: '/api/v0/add',
+        data: formData,
+        headers: {'Content-Type': 'multipart/form-data'}
+      }).then((response)=> {        
+        this.dataURI = response.data.Hash         
+      })
+    },
+
+    uploadedImg(){
+      return 'https://gateway.ipfs.io/ipfs/'+this.dataURI
+    },
+
+    submit() {
+      if(!this.dataURI){
+        alert("Fill in dataURI on the input")
+        return
+      }
+
+      this.klaytn.registerUniqueToken(this.tokenId, this.dataURI, (receipt) => {
+        alert(`Token registered...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
+        this.isRegistered = true
+      })      
+    },
+
+    transferToCA() {            
+      this.klaytn.transferFrom(this.tokenId, (receipt) => {
+        alert(`Token transfered to CA...! (#${receipt.blockNumber} ,${receipt.transactionHash})`)
+      })      
+    }    
+  }
+
+}
+</script>