pixelfed/resources/assets/components/partials/modal/UpdateAvatar.vue

149 lines
4.2 KiB
Vue

<template>
<b-modal
ref="avatarUpdateModal"
centered
hide-footer
header-class="py-2"
body-class="p-0"
title-class="w-100 text-center pl-4 font-weight-bold"
title-tag="p"
title="Upload Avatar"
>
<input type="file" class="d-none" ref="avatarUpdateRef" @change="handleAvatarUpdate()" accept="image/jpg,image/png">
<div class="d-flex align-items-center justify-content-center">
<div
v-if="avatarUpdateIndex === 0"
class="py-5 user-select-none cursor-pointer"
v-on:drop="handleDrop"
v-on:dragover="handleDrop"
@click="avatarUpdateStep(0)">
<p class="text-center primary">
<i class="fal fa-cloud-upload fa-3x"></i>
</p>
<p class="text-center lead">Drag photo here or click here</p>
<p class="text-center small text-muted mb-0">Must be a <strong>png</strong> or <strong>jpg</strong> image up to 2MB</p>
</div>
<div v-else-if="avatarUpdateIndex === 1" class="w-100 p-5">
<div class="d-md-flex justify-content-between align-items-center">
<div class="text-center mb-4">
<p class="small font-weight-bold" style="opacity:0.7;">Current</p>
<img :src="user.avatar" class="shadow" style="width: 150px;height: 150px;object-fit: cover;border-radius: 18px;opacity: 0.7;">
</div>
<div class="text-center mb-4">
<p class="font-weight-bold">New</p>
<img :src="avatarUpdatePreview" class="shadow" style="width: 220px;height: 220px;object-fit: cover;border-radius: 18px;">
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<button class="btn btn-light font-weight-bold btn-block mr-3" @click="avatarUpdateClear()">Clear</button>
<button class="btn btn-primary primary font-weight-bold btn-block mt-0" @click="confirmUpload()">Upload</button>
</div>
</div>
</div>
</b-modal>
</template>
<script type="text/javascript">
export default {
props: ['user'],
data() {
return {
loaded: false,
avatarUpdateIndex: 0,
avatarUpdateFile: undefined,
avatarUpdatePreview: undefined
}
},
methods: {
open() {
this.$refs.avatarUpdateModal.show();
},
avatarUpdateClose() {
this.$refs.avatarUpdateModal.hide();
this.avatarUpdateIndex = 0;
this.avatarUpdateFile = undefined;
},
avatarUpdateClear() {
this.avatarUpdateIndex = 0;
this.avatarUpdateFile = undefined;
},
avatarUpdateStep(index) {
this.$refs.avatarUpdateRef.click();
this.avatarUpdateIndex = index;
},
handleAvatarUpdate() {
let self = this;
let files = event.target.files;
Array.prototype.forEach.call(files, function(io, i) {
self.avatarUpdateFile = io;
self.avatarUpdatePreview = URL.createObjectURL(io);
self.avatarUpdateIndex = 1;
});
},
handleDrop(ev) {
ev.preventDefault();
let self = this;
if (ev.dataTransfer.items) {
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
if(!file) {
return;
}
self.avatarUpdateFile = file;
self.avatarUpdatePreview = URL.createObjectURL(file);
self.avatarUpdateIndex = 1;
}
}
} else {
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
if(!ev.dataTransfer.files[i].hasOwnProperty('name')) {
return;
}
self.avatarUpdateFile = ev.dataTransfer.files[i];
self.avatarUpdatePreview = URL.createObjectURL(ev.dataTransfer.files[i]);
self.avatarUpdateIndex = 1;
}
}
},
confirmUpload() {
if(!window.confirm('Are you sure you want to change your avatar photo?')) {
return;
}
let formData = new FormData();
formData.append('_method', 'PATCH');
formData.append('avatar', this.avatarUpdateFile);
axios.post('/api/v1/accounts/update_credentials', formData)
.then(res => {
window._sharedData.user.avatar = res.data.avatar;
this.avatarUpdateClose();
})
.catch(err => {
if(err.response.data && err.response.data.errors) {
if(err.response.data.errors.avatar && err.response.data.errors.avatar.length) {
swal('Oops!', err.response.data.errors.avatar[0], 'error');
}
}
})
}
}
}
</script>