pixelfed/resources/assets/components/partials/modal/UpdateAvatar.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>