68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
|
module.exports = {
|
||
|
|
props: ['user'],
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The component's data.
|
||
|
|
*/
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: new SparkForm({})
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* Update the user's profile photo.
|
||
|
|
*/
|
||
|
|
update(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if ( ! this.$refs.photo.files.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this.form.startProcessing();
|
||
|
|
|
||
|
|
// We need to gather a fresh FormData instance with the profile photo appended to
|
||
|
|
// the data so we can POST it up to the server. This will allow us to do async
|
||
|
|
// uploads of the profile photos. We will update the user after this action.
|
||
|
|
axios.post('/settings/photo', this.gatherFormData())
|
||
|
|
.then(
|
||
|
|
() => {
|
||
|
|
Bus.$emit('updateUser');
|
||
|
|
|
||
|
|
self.form.finishProcessing();
|
||
|
|
},
|
||
|
|
(error) => {
|
||
|
|
self.form.setErrors(error.response.data.errors);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Gather the form data for the photo upload.
|
||
|
|
*/
|
||
|
|
gatherFormData() {
|
||
|
|
const data = new FormData();
|
||
|
|
|
||
|
|
data.append('photo', this.$refs.photo.files[0]);
|
||
|
|
|
||
|
|
return data;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
/**
|
||
|
|
* Calculate the style attribute for the photo preview.
|
||
|
|
*/
|
||
|
|
previewStyle() {
|
||
|
|
return `background-image: url(${this.user.photo_url})`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|