kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
98 wiersze
3.4 KiB
Vue
98 wiersze
3.4 KiB
Vue
<template>
|
|
<file-pond name="photo" ref="filePond" :label-idle="labelIdle" :allow-multiple="true" :allow-replace="false" :allow-revert="false" :allow-paste="false" accepted-file-types="image/jpeg, image/png, image/heic" :server="uploadServer()" @processfile="onProcessFile" />
|
|
</template>
|
|
|
|
<script>
|
|
import vueFilePond from 'vue-filepond'
|
|
import prefs from '../mixins/prefs.js'
|
|
import { FileStatus } from 'filepond'
|
|
import 'filepond/dist/filepond.min.css'
|
|
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
|
|
import api from '../mixins/api.js'
|
|
import axios from 'axios'
|
|
|
|
const FilePond = vueFilePond(FilePondPluginFileValidateType)
|
|
|
|
export default {
|
|
props: {
|
|
summitCode: String
|
|
},
|
|
components: {
|
|
FilePond
|
|
},
|
|
prefs: {
|
|
key: 'photosUploaderPrefs',
|
|
props: ['gpsNotificationShown']
|
|
},
|
|
mixins: [api, prefs],
|
|
computed: {
|
|
labelIdle () {
|
|
if (this.$mq.mobile) {
|
|
return '<div>Tap to upload photos</div><div style="font-size: 0.7em">By uploading your photos, you allow SOTLAS to publish them. You can delete your photos at any time.</div>'
|
|
} else {
|
|
return '<div>Drag & Drop your photos or <span class="filepond--label-action">Browse</span> to upload</div><div style="font-size: 0.8em">By uploading your photos, you allow SOTLAS to publish them. You can delete your photos at any time.</div>'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
uploadServer () {
|
|
return {
|
|
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
|
|
const CancelToken = axios.CancelToken
|
|
const source = CancelToken.source()
|
|
this.uploadPhoto(this.summitCode, file, e => progress(e.lengthComputable, e.loaded, e.total), source.token)
|
|
.then(res => {
|
|
load(res)
|
|
|
|
if (res.data.length > 0 && !res.data[0].coordinates && !this.gpsNotificationShown) {
|
|
this.$buefy.dialog.alert({
|
|
title: 'No GPS information',
|
|
message: '<p>Your photo has been uploaded successfully, but did not contain GPS coordinates in its metadata (Exif header). If possible, try uploading original full-resolution files from your camera. SOTLAS will automatically reduce the resolution if needed, and will use the GPS coordinates to show the photos on the map if the position is accurate enough.</p><p><small>This alert will not appear again for future uploads with missing GPS information.</small></p>',
|
|
type: 'is-info',
|
|
hasIcon: true,
|
|
icon: 'info-circle',
|
|
iconPack: 'far'
|
|
})
|
|
this.gpsNotificationShown = true
|
|
}
|
|
})
|
|
.catch(err => {
|
|
error(err)
|
|
})
|
|
|
|
return {
|
|
abort () {
|
|
source.cancel()
|
|
abort()
|
|
}
|
|
}
|
|
},
|
|
fetch: null,
|
|
revert: null
|
|
}
|
|
},
|
|
onProcessFile () {
|
|
// Check if any other uploads are pending
|
|
if (this.$refs.filePond.getFiles().every(file => file.status === FileStatus.PROCESSING_COMPLETE)) {
|
|
this.$emit('upload')
|
|
this.$refs.filePond.removeFiles()
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
gpsNotificationShown: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
>>> .filepond--root {
|
|
margin-bottom: 0;
|
|
}
|
|
>>> .filepond--panel-root {
|
|
background-color: #f7f7f7;
|
|
}
|
|
</style>
|