mobilizon.chapril.org-mobil.../js/src/components/PictureUpload.vue

69 lines
1.3 KiB
Vue

<template>
<div class="root">
<figure class="image is-128x128">
<img class="is-rounded" v-bind:src="imageSrc">
<div class="image-placeholder" v-if="!imageSrc"></div>
</figure>
<b-upload @input="onFileChanged">
<a class="button is-primary">
<b-icon icon="upload"></b-icon>
<span>{{ $t('Click to upload') }}</span>
</a>
</b-upload>
</div>
</template>
<style scoped type="scss">
.root {
display: flex;
align-items: center;
}
.image {
margin-right: 30px;
}
.image-placeholder {
background-color: grey;
width: 100%;
height: 100%;
border-radius: 100%;
}
</style>
<script lang="ts">
import { Component, Model, Vue, Watch } from 'vue-property-decorator';
@Component
export default class PictureUpload extends Vue {
@Model('change', { type: File }) readonly pictureFile!: File;
imageSrc: string | null = null;
mounted() {
this.updatePreview(this.pictureFile);
}
@Watch('pictureFile')
onPictureFileChanged(val: File) {
this.updatePreview(val);
}
onFileChanged(file: File) {
this.$emit('change', file);
this.updatePreview(file);
}
private updatePreview(file?: File) {
if (file) {
this.imageSrc = URL.createObjectURL(file);
return;
}
this.imageSrc = null;
}
}
</script>