47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import { CustomElement } from './element.js';
|
|
import { __ } from 'i18n';
|
|
import { api } from "@converse/headless/core";
|
|
import { html } from 'lit';
|
|
|
|
const i18n_profile_picture = __('Your profile picture');
|
|
|
|
|
|
export default class ImagePicker extends CustomElement {
|
|
|
|
static get properties () {
|
|
return {
|
|
'height': { type: Number },
|
|
'data': { type: Object},
|
|
'width': { type: Number },
|
|
}
|
|
}
|
|
|
|
render () {
|
|
return html`
|
|
<a class="change-avatar" @click=${this.openFileSelection} title="${i18n_profile_picture}">
|
|
<converse-avatar class="avatar" .data=${this.data} height="${this.height}" width="${this.width}"></converse-avatar>
|
|
</a>
|
|
<input @change=${this.updateFilePreview} class="hidden" name="image" type="file"/>
|
|
`;
|
|
}
|
|
|
|
openFileSelection (ev) {
|
|
ev.preventDefault();
|
|
this.querySelector('input[type="file"]').click();
|
|
}
|
|
|
|
updateFilePreview (ev) {
|
|
const file = ev.target.files[0];
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
this.data = {
|
|
'data_uri': reader.result,
|
|
'image_type': file.type
|
|
}
|
|
}
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
|
|
api.elements.define('converse-image-picker', ImagePicker);
|