112 lines
3.7 KiB
Vue
112 lines
3.7 KiB
Vue
<template>
|
|
<div class="ui form">
|
|
<div v-if="errors.length > 0" role="alert" class="ui negative message">
|
|
<h4 class="header"><translate translate-context="Content/*/Error message.Title">Your attachment cannot be saved</translate></h4>
|
|
<ul class="list">
|
|
<li v-for="error in errors">{{ error }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ui field">
|
|
<span id="avatarLabel">
|
|
<slot name="label"></slot>
|
|
</span>
|
|
<div class="ui stackable grid row">
|
|
<div class="three wide column">
|
|
<img alt="" :class="['ui', imageClass, 'image']" v-if="value && value === initialValue" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${value}/proxy?next=medium_square_crop`)" />
|
|
<img alt="" :class="['ui', imageClass, 'image']" v-else-if="attachment" :src="$store.getters['instance/absoluteUrl'](`api/v1/attachments/${attachment.uuid}/proxy?next=medium_square_crop`)" />
|
|
<div :class="['ui', imageClass, 'static', 'large placeholder image']" v-else></div>
|
|
</div>
|
|
<div class="eleven wide column">
|
|
<div class="file-input">
|
|
<label :for="attachmentId">
|
|
<translate translate-context="*/*/*">Upload New Picture…</translate>
|
|
</label>
|
|
<input class="ui input" ref="attachment" type="file" :id="attachmentId" accept="image/x-png,image/jpeg" @change="submit" />
|
|
</div>
|
|
<div class="ui very small hidden divider"></div>
|
|
<p><translate translate-context="Content/*/Paragraph">PNG or JPG. Dimensions should be between 1400x1400px and 3000x3000px. Maximum file size allowed is 5MB.</translate></p>
|
|
<button class="ui basic tiny button" v-if="value" @click.stop.prevent="remove(value)">
|
|
<translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate>
|
|
</button>
|
|
<div v-if="isLoading" class="ui active inverted dimmer">
|
|
<div class="ui indeterminate text loader">
|
|
<translate translate-context="Content/*/*/Noun">Uploading file…</translate>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
props: {
|
|
value: {},
|
|
imageClass: {default: '', required: false}
|
|
},
|
|
data () {
|
|
return {
|
|
attachment: null,
|
|
isLoading: false,
|
|
errors: [],
|
|
initialValue: this.value,
|
|
attachmentId: Math.random().toString(36).substring(7),
|
|
}
|
|
},
|
|
methods: {
|
|
submit() {
|
|
this.isLoading = true
|
|
this.errors = []
|
|
let self = this
|
|
this.file = this.$refs.attachment.files[0]
|
|
let formData = new FormData()
|
|
formData.append("file", this.file)
|
|
axios
|
|
.post(`attachments/`, formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data"
|
|
}
|
|
})
|
|
.then(
|
|
response => {
|
|
this.isLoading = false
|
|
self.attachment = response.data
|
|
self.$emit('input', self.attachment.uuid)
|
|
},
|
|
error => {
|
|
self.isLoading = false
|
|
self.errors = error.backendErrors
|
|
}
|
|
)
|
|
},
|
|
remove(uuid) {
|
|
this.isLoading = true
|
|
this.errors = []
|
|
let self = this
|
|
axios.delete(`attachments/${uuid}/`)
|
|
.then(
|
|
response => {
|
|
this.isLoading = false
|
|
self.attachment = null
|
|
self.$emit('delete')
|
|
},
|
|
error => {
|
|
self.isLoading = false
|
|
self.errors = error.backendErrors
|
|
}
|
|
)
|
|
},
|
|
},
|
|
watch: {
|
|
value (v) {
|
|
if (this.attachment && v === this.initialValue) {
|
|
// we had a reset to initial value
|
|
this.remove(this.attachment.uuid)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|