Skip to content
Permalink
Browse files

プロフィール画像を保存できるようにする

プロフィール画像はCloud Storageにアップロードする
  • Loading branch information...
h-sakano committed Dec 3, 2018
1 parent 2d200e8 commit 1da47674869a932830315065aa99fb9f09c87d82
Showing with 68 additions and 2 deletions.
  1. +1 −0 src/types/UserDataType.ts
  2. +67 −2 src/views/MyPage.vue
@@ -4,4 +4,5 @@ export default interface UserDataType {
createdAt?: firebase.firestore.FieldValue
updatedAt?: firebase.firestore.FieldValue
profile?: string
imageUrl?: string
}
@@ -4,6 +4,34 @@
<div class="greeting">
<h1 class="title is-6">Hello, {{displayName}}.</h1>
</div>
<div class="field">
<label class="label">Image</label>
<div class="control">
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="file" accept='image/*' @change="selectFile">
<span class="file-cta">
<span class="file-label">
Choose
</span>
</span>
<span class="file-name">
{{ selectedImageFileName }}
</span>
</label>
</div>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link" @click="saveImage">Save Image</button>
</div>
</div>
<div class="field">
<div class="control">
<img :src="imageUrl" class="image">
</div>
</div>
<div class="field">
<label class="label">Profile</label>
<div class="control">
@@ -18,7 +46,7 @@
</div>
<div class="field">
<div class="control">
<button class="button is-link" @click="save">Submit</button>
<button class="button is-link" @click="saveProfile">Save Profile</button>
</div>
</div>
<button class="button is-primary" @click="signOut">
@@ -32,6 +60,7 @@
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/functions'
import 'firebase/storage'
import _ from 'lodash'
import firestore from '@/firestore'
import { Component, Vue, Watch } from 'vue-property-decorator'
@@ -42,6 +71,8 @@ export default class MyPage extends Vue {
private profile: string = ''
private debouncedSanitize: any = null
private sanitizedProfile: string = ''
private selectedFile: any = null
private imageUrl: string = ''
private created () {
this.debouncedSanitize = _.debounce(this.updateSanitizedProfile, 500)
@@ -51,11 +82,12 @@ export default class MyPage extends Vue {
const userData = doc.data()
if (doc && userData) {
this.profile = userData.profile
this.imageUrl = userData.imageUrl
}
})
}
private save () {
private saveProfile () {
firestore.collection('users').doc(this.$store.getters.user.uid).update({
profile: this.profile,
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
@@ -70,6 +102,28 @@ export default class MyPage extends Vue {
this.$router.push('/')
}
private selectFile (e: any): void {
e.preventDefault()
this.selectedFile = e.target.files[0]
}
private saveImage () {
const storageRef = firebase.storage().ref()
const imageRef = storageRef.child(`${this.$store.getters.user.uid}/${this.selectedImageFileName}`)
if (this.selectedFile) {
imageRef.put(this.selectedFile)
.then((snapshot) => {
snapshot.ref.getDownloadURL().then((downloadURL) => {
this.imageUrl = downloadURL
firestore.collection('users').doc(this.$store.getters.user.uid).update({
imageUrl: downloadURL,
updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
})
})
})
}
}
private async updateSanitizedProfile () {
const sanitizeFunc = firebase.functions().httpsCallable('sanitize')
const response = await sanitizeFunc({ text: this.profile })
@@ -80,6 +134,13 @@ export default class MyPage extends Vue {
return this.$store.getters.user.displayName || 'Nameless'
}
get selectedImageFileName (): string {
if (this.selectedFile) {
return this.selectedFile.name
}
return '...'
}
@Watch('profile')
private watchProfile (val: string, oldVal: string) {
this.debouncedSanitize()
@@ -98,4 +159,8 @@ export default class MyPage extends Vue {
border-radius: 3px;
padding: 10px;
}
.image {
max-width: 300px;
max-height: 300px;
}
</style>

0 comments on commit 1da4767

Please sign in to comment.
You can’t perform that action at this time.