<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify/dist/vuetify.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify-avatar-uploader/dist/vuetify-avatar-uploader.min.js"></script>
<script type="text/javascript">
  Vue.use(VAvatarUploader);
</script> 

<template>
  <v-avatar-uploader
    :url="url"
    :request="request"
  />
</template>
 
<script>
import VAvatarUploader from 'vuetify-avatar-uploader'
 
export default {
  computed: {
    // Determine the URL to show, typically from an object representing a user
    url () {
      return 'https://randomuser.me/api/portraits/men/1.jpg'
    }
  },
 
  methods: {
    // Responsible for performing the upload request to your API
    request (form, config) {
      return this.$http.post('/v1/avatars', form, config)
    }
  },
 
  components: {
    VAvatarUploader
  }
}
</script> 

<template>
  <v-avatar-uploader
    :url="url"
    :request="request"
    :clickable="clickable"
    :rename="rename"
    @success="success"
    @failed="failed"
  />
</template>
 
<script>
import VAvatarUploader from 'vuetify-avatar-uploader'
import events from '@/util/events'
 
import uuid from 'uuid/v4'
import get from 'dlv'
import { mapState } from 'vuex'
 
export default {
  name: 'user-avatar-uploader',
 
  props: {
    user: {
      type: Object,
      required: true
    }
  },
 
  computed: {
    ...mapState('api/user', ['session']),
 
    url () {
      return get(this.user, 'avatar.thumb')
    },
 
    clickable () {
      return this.user.id === this.session.id
    }
  },
 
  methods: {
    request (form, config) {
      return this.$http.post('/v1/avatars', form, config)
    },
 
    rename (file) {
      const ext = file.name.split('.')[1]
      const name = `${uuid()}.${ext}`
 
      return name
    },
 
    success ({ data }) {
      // Update user avatar with the latest
      Object.assign(this.user.avatar, data)
 
      // Request the latest user object from the API to update all other references in the app
      this.$store.dispatch('api/user/get')
    },
 
    failed (error) {
      events.$emit('notify', { text: 'Failed to upload avatar', kind: 'error', icon: 'warning' })
    }
  },
 
  components: {
    VAvatarUploader
  }
}
</script>