mobilizon.chapril.org-mobil.../js/src/components/PictureUpload.vue
Thomas Citharel c9457fe0d3
Track usage of media files and add a job to clean them
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2020-11-26 17:53:33 +01:00

129 lines
2.8 KiB
Vue

<template>
<div class="root">
<figure class="image" v-if="imageSrc">
<img :src="imageSrc" />
</figure>
<figure class="image is-128x128" v-else>
<div class="image-placeholder">
<span class="has-text-centered">{{ textFallback }}</span>
</div>
</figure>
<div class="action-buttons">
<b-field class="file is-primary">
<b-upload @input="onFileChanged" :accept="accept" class="file-label">
<span class="file-cta">
<b-icon class="file-icon" icon="upload" />
<span>{{ $t("Click to upload") }}</span>
</span>
</b-upload>
</b-field>
<b-button type="is-text" v-if="imageSrc" @click="removeOrClearPicture">
{{ $t("Clear") }}
</b-button>
</div>
</div>
</template>
<style scoped lang="scss">
.root {
display: flex;
align-items: center;
}
figure.image {
margin-right: 30px;
max-height: 200px;
max-width: 200px;
overflow: hidden;
}
.image-placeholder {
background-color: grey;
width: 100%;
height: 100%;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
span {
flex: 1;
color: #eee;
}
}
.action-buttons {
display: flex;
flex-direction: column;
}
</style>
<script lang="ts">
import { IMedia } from "@/types/media.model";
import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class PictureUpload extends Vue {
@Model("change", { type: File }) readonly pictureFile!: File;
@Prop({ type: Object, required: false }) defaultImage!: IMedia;
@Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
accept!: string;
@Prop({
type: String,
required: false,
default() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return this.$t("Avatar");
},
})
textFallback!: string;
imageSrc: string | null = this.defaultImage ? this.defaultImage.url : null;
file!: File | null;
mounted(): void {
if (this.pictureFile) {
this.updatePreview(this.pictureFile);
}
}
@Watch("pictureFile")
onPictureFileChanged(val: File): void {
console.log("onPictureFileChanged", val);
this.updatePreview(val);
}
@Watch("defaultImage")
onDefaultImageChange(defaultImage: IMedia): void {
console.log("onDefaultImageChange", defaultImage);
this.imageSrc = defaultImage ? defaultImage.url : null;
}
onFileChanged(file: File | null): void {
this.$emit("change", file);
this.updatePreview(file);
this.file = file;
}
async removeOrClearPicture(): Promise<void> {
this.onFileChanged(null);
}
private updatePreview(file?: File | null) {
if (file) {
this.imageSrc = URL.createObjectURL(file);
return;
}
this.imageSrc = null;
}
}
</script>