You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.1 KiB
Vue
115 lines
3.1 KiB
Vue
<template>
|
|
<div @dragenter.stop.prevent @dragover.stop.prevent @drop.stop.prevent="drop" id="upload" class="flex flex-column ph4 pv4 ba b--dashed bw2 b--light-red br4 bg-near-white mid-gray">
|
|
|
|
<div class="title f5 b lh-title ttu tc">drop files here to start</div>
|
|
|
|
<div class="or f6 mv2 tc">OR</div>
|
|
|
|
|
|
<form class="input-reset flex flex-column justify-center">
|
|
|
|
<!--hidden file input-->
|
|
<input id="fileInput" class="dn" v-on:change="fileChange($event)" type="file" multiple />
|
|
|
|
<button class="mb3" @click="chooseFiles" id="fileSelect">choose files</button>
|
|
|
|
<div class="options w-100 flex flex-row justify-between">
|
|
<input v-model.trim.number="amount" type="number">
|
|
|
|
<select v-model="selectedCurrency">
|
|
<option v-for="cur in currencies">{{cur}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
|
|
<!--<p>selected {{fileCount}} files</p>-->
|
|
<!--<ul>-->
|
|
<!--<li v-bind:files="files" v-for="file in files"> -->
|
|
<!--{{ file.name }}-->
|
|
<!--<ul>-->
|
|
<!--<li>size: {{ file.size / 1000 }} kB </li>-->
|
|
<!--<li>type: {{ file.type }} </li>-->
|
|
<!--</ul>-->
|
|
<!--</li>-->
|
|
<!--</ul>-->
|
|
|
|
</form>
|
|
|
|
<div class="desc f6 pt2 b lh-copy measure-narrow gray tc">
|
|
<p>
|
|
If choose to setup a fee for your link, every download will
|
|
require a payment.
|
|
</p>
|
|
<p>You can redeem your payments at any time.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script charset="utf-8">
|
|
import GetWorker from './workerInterface.js';
|
|
const w = GetWorker('main');
|
|
|
|
//w.listenTo('upload-id', (e) => {
|
|
// console.log('vue received upload id ', e.data.id)
|
|
// console.log('vue received upload id ', e.data.invoice)
|
|
//})
|
|
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
fileCount: 0,
|
|
files: [],
|
|
currencies: ['EUR', 'USD', 'SAT', 'MSAT'],
|
|
amount: 100,
|
|
selectedCurrency: 'SAT'
|
|
}
|
|
},
|
|
mounted(){
|
|
this.fileInput = this.$el.querySelector('#fileInput')
|
|
},
|
|
methods: {
|
|
drop(event){
|
|
this.files=[]
|
|
const dt = event.dataTransfer;
|
|
this.fileCount = dt.files.length;
|
|
this.files = dt.files;
|
|
w.post({
|
|
msg: 'new-upload',
|
|
payload: [...this.files],
|
|
})
|
|
|
|
},
|
|
chooseFiles(event){
|
|
this.fileInput.click();
|
|
},
|
|
fileChange(event) {
|
|
// reset
|
|
this.files = []
|
|
|
|
|
|
this.fileCount = event.target.files.length
|
|
this.files = event.target.files
|
|
|
|
w.post({
|
|
msg: 'new-upload',
|
|
payload: [...this.files],
|
|
})
|
|
|
|
// Get sha256 of files
|
|
// for (let file of this.files) {
|
|
// w.post({
|
|
// msg: 'file-sha256',
|
|
// payload: file
|
|
// })
|
|
// }
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|