Removing jQuery altogether
This commit is contained in:
@@ -1,87 +1,127 @@
|
||||
<script>
|
||||
import SpotIcon from './spotIcon.vue';
|
||||
import SpotButton from './spotButton.vue';
|
||||
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
|
||||
import "blueimp-file-upload/js/jquery.iframe-transport.js";
|
||||
import "blueimp-file-upload/js/jquery.fileupload.js";
|
||||
|
||||
export default {
|
||||
name: 'upload',
|
||||
components: { SpotButton, SpotIcon },
|
||||
inject: ['spot', 'projects', 'consts', 'user'],
|
||||
data() {
|
||||
return {
|
||||
project: this.projects[this.spot.vars('default_project_codename')],
|
||||
files: [],
|
||||
logs: [],
|
||||
progress: 0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.spot.addPage('upload', {});
|
||||
|
||||
if(this.project.editable) {
|
||||
$('#fileupload')
|
||||
.fileupload({
|
||||
dataType: 'json',
|
||||
formData: {t: this.user.timezone},
|
||||
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov)$/i,
|
||||
done: (e, asData) => {
|
||||
$.each(asData.result.files, (iKey, oFile) => {
|
||||
let bError = ('error' in oFile);
|
||||
|
||||
//Feedback
|
||||
this.logs.push(bError?oFile.error:(this.spot.lang('upload_success', [oFile.name])));
|
||||
|
||||
//Comments
|
||||
oFile.content = '';
|
||||
if(!bError) this.files.push(oFile);
|
||||
});
|
||||
},
|
||||
progressall: (e, data) => {
|
||||
this.progress = parseInt(data.loaded / data.total * 100, 10);
|
||||
}
|
||||
});
|
||||
}
|
||||
else this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
|
||||
},
|
||||
methods: {
|
||||
addComment(oFile) {
|
||||
this.spot.get2('add_comment', {id: oFile.id, content: oFile.content})
|
||||
.then((asData) => {this.logs.push(this.spot.lang('media_comment_update', asData.filename));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
addPosition() {
|
||||
if(navigator.geolocation) {
|
||||
this.logs.push('Determining position...');
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
this.logs.push('Sending position...');
|
||||
this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
|
||||
.then((asData) => {this.logs.push(self.lang(sMsgId));})
|
||||
.catch((sMsgId) => {this.logs.push(self.lang(sMsgId));});
|
||||
},
|
||||
(error) => {
|
||||
this.logs.push(error.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
else this.logs.push('This browser does not support geolocation');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="upload">
|
||||
<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="spot.lang('nav_back')" /></a>
|
||||
<h1>{{ spot.lang('upload_media_title') }}</h1>
|
||||
<h2>{{ this.project.name }}</h2>
|
||||
<div class="section" v-if="project.editable">
|
||||
<input id="fileupload" type="file" name="files[]" :data-url="this.spot.getActionLink('upload')" multiple />
|
||||
</div>
|
||||
<div class="section progress" v-if="progress > 0">
|
||||
<div class="bar" :style="{width:progress+'%'}"></div>
|
||||
</div>
|
||||
<script>
|
||||
import { markRaw } from 'vue';
|
||||
import Uppy from '@uppy/core';
|
||||
import XHRUpload from '@uppy/xhr-upload';
|
||||
import '@uppy/core/css/style.min.css';
|
||||
|
||||
import SpotIcon from './spotIcon.vue';
|
||||
import SpotButton from './spotButton.vue';
|
||||
|
||||
export default {
|
||||
name: 'upload',
|
||||
components: { SpotButton, SpotIcon },
|
||||
inject: ['spot', 'projects', 'consts', 'user'],
|
||||
data() {
|
||||
return {
|
||||
project: this.projects[this.spot.vars('default_project_codename')],
|
||||
files: [],
|
||||
logs: [],
|
||||
progress: 0,
|
||||
uppy: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.spot.addPage('upload', {});
|
||||
|
||||
if(!this.project.editable) {
|
||||
this.logs = [this.spot.lang('upload_mode_archived', [this.project.name])];
|
||||
return;
|
||||
}
|
||||
|
||||
this.initUploader();
|
||||
},
|
||||
beforeUnmount() {
|
||||
if(this.uppy) {
|
||||
this.uppy.destroy();
|
||||
this.uppy = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initUploader() {
|
||||
const endpoint = `${this.consts.process_page}?a=upload`;
|
||||
|
||||
this.uppy = markRaw(new Uppy({
|
||||
autoProceed: true,
|
||||
restrictions: {
|
||||
allowedFileTypes: ['.gif', '.jpg', '.jpeg', '.png', '.mov', '.mp4']
|
||||
}
|
||||
}));
|
||||
|
||||
this.uppy.setMeta({t: this.user.timezone});
|
||||
|
||||
this.uppy.use(XHRUpload, {
|
||||
endpoint,
|
||||
fieldName: 'files[]',
|
||||
formData: true,
|
||||
allowedMetaFields: ['t', 'name', 'type'],
|
||||
getResponseData(xhr) {
|
||||
return JSON.parse(xhr.responseText || '{}');
|
||||
}
|
||||
});
|
||||
|
||||
this.uppy.on('progress', (progress) => {
|
||||
this.progress = progress;
|
||||
});
|
||||
|
||||
this.uppy.on('upload-success', (file, response) => {
|
||||
const uploadedFiles = response?.body?.files || [];
|
||||
uploadedFiles.forEach((uploadedFile) => {
|
||||
const hasError = Object.prototype.hasOwnProperty.call(uploadedFile, 'error');
|
||||
this.logs.push(hasError ? uploadedFile.error : this.spot.lang('upload_success', [uploadedFile.name]));
|
||||
if(!hasError) this.files.push({...uploadedFile, content: ''});
|
||||
});
|
||||
});
|
||||
|
||||
this.uppy.on('upload-error', (file, error, response) => {
|
||||
const message = response?.body?.error || error?.message || this.spot.lang('error');
|
||||
this.logs.push(message);
|
||||
});
|
||||
|
||||
this.uppy.on('complete', () => {
|
||||
this.progress = 0;
|
||||
});
|
||||
},
|
||||
onFileChange(event) {
|
||||
const files = Array.from(event.target.files || []);
|
||||
if(files.length > 0 && this.uppy) this.uppy.addFiles(files.map((file) => ({source: 'local', name: file.name, type: file.type, data: file})));
|
||||
event.target.value = '';
|
||||
},
|
||||
addComment(oFile) {
|
||||
this.spot.get2('add_comment', {id: oFile.id, content: oFile.content})
|
||||
.then((asData) => {this.logs.push(this.spot.lang('media_comment_update', asData.filename));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
addPosition() {
|
||||
if(navigator.geolocation) {
|
||||
this.logs.push('Determining position...');
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
this.logs.push('Sending position...');
|
||||
this.spot.get2('add_position', {'latitude':position.coords.latitude, 'longitude':position.coords.longitude, 'timestamp':Math.round(position.timestamp / 1000)})
|
||||
.then((asData) => {this.logs.push(this.spot.lang('success'));})
|
||||
.catch((sMsgId) => {this.logs.push(this.spot.lang(sMsgId));});
|
||||
},
|
||||
(error) => {
|
||||
this.logs.push(error.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
else this.logs.push('This browser does not support geolocation');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div id="upload">
|
||||
<a name="back" class="button" href="#project"><SpotIcon :icon="'back'" :text="spot.lang('nav_back')" /></a>
|
||||
<h1>{{ spot.lang('upload_media_title') }}</h1>
|
||||
<h2>{{ this.project.name }}</h2>
|
||||
<div class="section" v-if="project.editable">
|
||||
<input id="fileupload" type="file" name="files[]" multiple accept=".gif,.jpg,.jpeg,.png,.mov,.mp4" @change="onFileChange" />
|
||||
</div>
|
||||
<div class="section progress" v-if="progress > 0">
|
||||
<div class="bar" :style="{width:progress+'%'}"></div>
|
||||
</div>
|
||||
<div class="section comment" v-for="file in files">
|
||||
<img class="thumb" :src="file.thumbnail" />
|
||||
<div class="form">
|
||||
@@ -98,4 +138,4 @@ export default {
|
||||
<p class="log" v-for="log in logs">{{ log }}.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user