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.
123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<template>
|
|
<div @dragenter.stop.prevent @dragover.stop.prevent @drop.stop.prevent="drop" id="upload" class="flex flex-column ph4 pv4 ba bw1 b--light-red br1 bg-near-white mid-gray">
|
|
|
|
<div class="title f6 b lh-title ttu tc">drop files here</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.stop.prevent="chooseFiles" id="fileSelect">pick files</button>
|
|
|
|
<div class="askFee flex justify-start items-center">
|
|
<input id="request_payment" type="checkbox" v-model="options.request_payment">
|
|
<label class="ph2 pv2" for="request_payment">Ask fee for download ?</label>
|
|
</div>
|
|
<div class="options w-100 flex flex-row justify-between">
|
|
<input :disabled="!options.request_payment" placeholder="ask fee for download" v-model.trim.number="options.request_payment_amount" type="number">
|
|
|
|
<select :disabled="!options.request_payment" v-model="options.payment_currency">
|
|
<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>
|
|
</template>
|
|
|
|
<script charset="utf-8">
|
|
import { mapState } from 'vuex'
|
|
import GetWorker from './workerInterface.js';
|
|
const Worker = GetWorker('main');
|
|
|
|
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
fileCount: 0,
|
|
files: [],
|
|
currencies: ['EUR', 'USD', 'SAT', 'MSAT'],
|
|
}
|
|
},
|
|
mounted(){
|
|
this.fileInput = this.$el.querySelector('#fileInput')
|
|
this.worker = Worker
|
|
|
|
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
options: state => state.upload.options
|
|
})
|
|
},
|
|
methods: {
|
|
drop(event){
|
|
this.files=[]
|
|
const dt = event.dataTransfer;
|
|
this.fileCount = dt.files.length;
|
|
this.files = dt.files;
|
|
|
|
this.worker.post({
|
|
msg: 'new-upload',
|
|
payload: {
|
|
files: [...this.files],
|
|
options: this.options
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
chooseFiles(event){
|
|
console.log("calling choose files")
|
|
this.fileInput.click();
|
|
},
|
|
fileChange(event) {
|
|
// reset
|
|
this.files = []
|
|
|
|
|
|
this.fileCount = event.target.files.length
|
|
this.files = event.target.files
|
|
|
|
console.log('filechange notifying new-upload')
|
|
this.worker.post({
|
|
msg: 'new-upload',
|
|
payload: {
|
|
files: [...this.files],
|
|
options: this.options
|
|
}
|
|
})
|
|
|
|
// Get sha256 of files
|
|
// for (let file of this.files) {
|
|
// w.post({
|
|
// msg: 'file-sha256',
|
|
// payload: file
|
|
// })
|
|
// }
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|