Frontend: Show review info in upload dialog
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
194e208e31
commit
68b77e1e7d
|
|
@ -27,11 +27,15 @@
|
|||
:indeterminate="indexing"></v-progress-linear>
|
||||
|
||||
|
||||
<p class="subheading" v-if="safe">
|
||||
<p class="body-1" v-if="safe">
|
||||
Please don't upload photos containing offensive content. Uploads
|
||||
that may contain such images will be rejected automatically.
|
||||
</p>
|
||||
|
||||
<p class="body-1" v-if="review">
|
||||
Low-quality photos require a review before they appear in search results.
|
||||
</p>
|
||||
|
||||
<v-btn
|
||||
:disabled="busy"
|
||||
color="secondary-dark"
|
||||
|
|
@ -69,7 +73,8 @@
|
|||
total: 0,
|
||||
completed: 0,
|
||||
started: 0,
|
||||
safe: !this.$config.get("uploadNSFW")
|
||||
review: this.$config.settings().library.review,
|
||||
safe: !this.$config.get("uploadNSFW"),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -171,6 +176,8 @@
|
|||
this.total = 0;
|
||||
this.completed = 0;
|
||||
this.started = 0;
|
||||
this.review = this.$config.settings().library.review;
|
||||
this.safe = !this.$config.get("uploadNSFW");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,136 +0,0 @@
|
|||
<template>
|
||||
<div class="p-tab p-tab-upload">
|
||||
<v-form ref="form" class="p-photo-upload" lazy-validation @submit.prevent="submit" dense>
|
||||
<input type="file" ref="upload" multiple @change.stop="upload()" class="d-none">
|
||||
|
||||
<v-container fluid>
|
||||
<p class="subheading">
|
||||
<span v-if="total === 0">Select photos to start upload...</span>
|
||||
<span v-else-if="failed">Upload failed</span>
|
||||
<span v-else-if="total > 0 && completed < 100">
|
||||
Uploading {{current}} of {{total}}...
|
||||
</span>
|
||||
<span v-else-if="indexing">Upload complete. Indexing...</span>
|
||||
<span v-else-if="completed === 100">Done.</span>
|
||||
</p>
|
||||
|
||||
<v-progress-linear color="secondary-dark" v-model="completed"
|
||||
:indeterminate="indexing"></v-progress-linear>
|
||||
|
||||
|
||||
<p class="subheading" v-if="safe">
|
||||
Please don't upload photos containing offensive content. Uploads
|
||||
that may contain such images will be rejected automatically.
|
||||
</p>
|
||||
|
||||
<v-btn
|
||||
:disabled="busy"
|
||||
color="secondary-dark"
|
||||
class="white--text ml-0 mt-2"
|
||||
depressed
|
||||
@click.stop="uploadDialog()"
|
||||
>
|
||||
<translate>Upload</translate>
|
||||
<v-icon right dark>cloud_upload</v-icon>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "common/api";
|
||||
import Notify from "common/notify";
|
||||
|
||||
export default {
|
||||
name: 'p-tab-upload',
|
||||
data() {
|
||||
return {
|
||||
selected: [],
|
||||
uploads: [],
|
||||
busy: false,
|
||||
indexing: false,
|
||||
failed: false,
|
||||
current: 0,
|
||||
total: 0,
|
||||
completed: 0,
|
||||
started: 0,
|
||||
safe: !this.$config.get("uploadNSFW")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
// DO NOTHING
|
||||
},
|
||||
uploadDialog() {
|
||||
this.$refs.upload.click();
|
||||
},
|
||||
upload() {
|
||||
this.started = Date.now();
|
||||
this.selected = this.$refs.upload.files;
|
||||
this.busy = true;
|
||||
this.indexing = false;
|
||||
this.failed = false;
|
||||
this.total = this.selected.length;
|
||||
this.current = 0;
|
||||
this.completed = 0;
|
||||
this.uploads = [];
|
||||
|
||||
if (!this.total) {
|
||||
return
|
||||
}
|
||||
|
||||
Notify.info(this.$gettext("Uploading photos..."));
|
||||
Notify.blockUI();
|
||||
|
||||
async function performUpload(ctx) {
|
||||
for (let i = 0; i < ctx.selected.length; i++) {
|
||||
let file = ctx.selected[i];
|
||||
let formData = new FormData();
|
||||
|
||||
ctx.current = i + 1;
|
||||
|
||||
formData.append('files', file);
|
||||
|
||||
await Api.post('upload/' + ctx.started,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
).then(() => {
|
||||
ctx.completed = Math.round((ctx.current / ctx.total) * 100);
|
||||
}).catch(() => {
|
||||
ctx.busy = false;
|
||||
ctx.indexing = false;
|
||||
ctx.completed = 100;
|
||||
ctx.failed = true;
|
||||
Notify.unblockUI();
|
||||
throw Error("upload failed");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
performUpload(this).then(() => {
|
||||
this.indexing = true;
|
||||
const ctx = this;
|
||||
|
||||
Api.post('import/upload/' + this.started, {
|
||||
move: true,
|
||||
}).then(() => {
|
||||
Notify.unblockUI();
|
||||
Notify.success(ctx.$gettext("Upload complete"));
|
||||
ctx.busy = false;
|
||||
ctx.indexing = false;
|
||||
}).catch(() => {
|
||||
Notify.unblockUI();
|
||||
Notify.error(ctx.$gettext("Failure while importing uploaded files"));
|
||||
ctx.busy = false;
|
||||
ctx.indexing = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
v-model="settings.library.private"
|
||||
color="secondary-dark"
|
||||
:label="labels.private"
|
||||
hint="Exclude photos and videos marked as private from search results by default."
|
||||
hint="Exclude photos marked as private from search results by default."
|
||||
prepend-icon="lock"
|
||||
persistent-hint
|
||||
>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
v-model="settings.library.review"
|
||||
color="secondary-dark"
|
||||
:label="labels.review"
|
||||
hint="Low-quality photos and videos require a review before they appear in search results."
|
||||
hint="Low-quality photos require a review before they appear in search results."
|
||||
prepend-icon="remove_red_eye"
|
||||
persistent-hint
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue