<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>