Newer
Older
<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>
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<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>
<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>
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<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>
<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>
</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 {
selectedFile: null,
fileContents: this.fileContents,
output: output,
path: path,
copytext: copytext,
}
},
// computed: {
// ...mapState({
// myNodes: (state) => state.myNodes,
// }),
// },
},
watch: {
uploadready: function (newVal) {
// watch it
if (newVal == true) {
document.getElementById('file').click()
}
},
copyready: function (newVal2) {
// watch it
//console.log(newVal2)
if (newVal2 == true) {
document.getElementById('copyme').click()
}
},
dropReady() {
dropArea = document.getElementById('dropContainer')
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
dropArea.addEventListener(eventName, this.preventDefaults, false)
})
;['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)
})
dropArea.addEventListener('drop', this.handleDrop, false)
if (document.getElementsByClassName('dropList')[0] != undefined) {
document.getElementsByClassName('dropList')[0].className =
'ipfsupload dropList dragover'
}
if (document.getElementsByClassName('dropList')[0] != undefined) {
document.getElementsByClassName('dropList')[0].className =
'ipfsupload dropList'
}
if (document.getElementsByClassName('dropORG')[0] != undefined) {
document.getElementsByClassName('dropORG')[0].className =
'ipfsupload dropORG dragover'
}
if (document.getElementsByClassName('dropORG')[0] != undefined) {
document.getElementsByClassName('dropORG')[0].className =
'ipfsupload dropORG'
}
},
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))
},
async getIpfsNodeInfo() {
try {
// Await for ipfs node instance.
node = await ipfs
// Call ipfs `id` method.
// Returns the identity of the Peer.
// const { agentVersion, id } = await node.id()
// this.agentVersion = agentVersion
// this.id = id
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
}
},
onFileSelected(event) {
this.selectedFile = event.target.files[0]
this.saveIPFS()
},
async saveIPFS() {
this.fileContents = await node.add(this.selectedFile)
this.getIPFS()
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
async dropIPFS(files) {
try {
this.fileContents = await node.add(files)
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
console.log(this.status)
}
},
try {
for await (const newfile of node.get(this.fileContents.path)) {
// console.log(newfile.path)
this.path = newfile.path
}
} catch (err) {
// Set error status text.
this.status = `Error: ${err}`
copyClipBoard(e, type) {
switch (true) {
case type.includes('image/'):
this.copytext = ''
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
}
copyClick() {
document.getElementById('copyme').click()
},
copyDone() {
var copyHash = document.getElementById('ipfshash')
copyHash.select()
copyHash.setSelectionRange(0, 99999) /*For mobile devices*/
document.execCommand('copy')
},
},
}
</script>
<style lang="css" scoped>
border: 1px solid rgb(180, 180, 180);
height: 100px;
margin: 1em;
}
.dropList {
padding: 1em;
background-color: white;
}
.dropORG {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border: 1px solid rgb(180, 180, 180);
border-radius: 20px;
height: 100px;
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);