In image picker, update the image when a file is picked

src/shared/avatar/avatar.js

@@ -10,6 +10,7 @@ export default class Avatar extends CustomElement {
     static get properties() {
         return {
             model: { type: Object },
+            pickerdata: { type: Object },
             name: { type: String },
             width: { type: String },
             height: { type: String },
@@ -20,13 +21,19 @@ export default class Avatar extends CustomElement {
     constructor() {
         super();
         this.model = null;
+        this.pickerdata = null;
         this.width = 36;
         this.height = 36;
         this.name = '';
     }
 
     render() {
-        const { image_type, image, data_uri } = this.model?.vcard?.attributes || {};
+        const { image_type, image, data_uri } = Object.assign(
+            {},
+            this.pickerdata?.attributes,
+            this.model?.vcard?.attributes
+        );
+
         if (image_type && (image || data_uri)) {
             return tplAvatar({
                 classes: this.getAttribute('class'),

src/shared/components/image-picker.js

@@ -1,3 +1,4 @@
+import { Model } from '@converse/skeletor';
 import { CustomElement } from './element.js';
 import { __ } from 'i18n';
 import { api } from "@converse/headless";
@@ -13,12 +14,14 @@ export default class ImagePicker extends CustomElement {
         this.model = null;
         this.width = null;
         this.height = null;
+        this.data = new Model();
+        this.nonce = null;
     }
 
     static get properties () {
         return {
             height: { type: Number },
-            model: { type: Object},
+            model: { type: Object },
             width: { type: Number },
         }
     }
@@ -28,10 +31,11 @@ export default class ImagePicker extends CustomElement {
             <a class="change-avatar" @click=${this.openFileSelection} title="${i18n_profile_picture}">
                 <converse-avatar
                     .model=${this.model}
+                    .pickerdata=${this.data}
                     class="avatar"
                     name="${this.model.getDisplayName()}"
                     height="${this.height}"
-                    nonce=${this.model.vcard?.get('vcard_updated')}
+                    nonce=${this.nonce || this.model.vcard?.get('vcard_updated')}
                     width="${this.width}"></converse-avatar>
             </a>
             <input @change=${this.updateFilePreview} class="hidden" name="avatar_image" type="file"/>
@@ -50,14 +54,15 @@ export default class ImagePicker extends CustomElement {
      * @param {InputEvent} ev
      */
     updateFilePreview (ev) {
-        // FIXME: this doesn't nothing currently
         const file = /** @type {HTMLInputElement} */(ev.target).files[0];
         const reader = new FileReader();
         reader.onloadend = () => {
-            this.data = {
+            this.data.set({
                 'data_uri': reader.result,
                 'image_type': file.type
-            }
+            });
+            this.nonce = new Date().toISOString();
+            this.requestUpdate();
         }
         reader.readAsDataURL(file);
     }

src/types/shared/avatar/avatar.d.ts

@@ -3,6 +3,9 @@ export default class Avatar extends CustomElement {
         model: {
             type: ObjectConstructor;
         };
+        pickerdata: {
+            type: ObjectConstructor;
+        };
         name: {
             type: StringConstructor;
         };
@@ -17,6 +20,7 @@ export default class Avatar extends CustomElement {
         };
     };
     model: any;
+    pickerdata: any;
     width: number;
     height: number;
     name: string;

src/types/shared/components/image-picker.d.ts

@@ -13,6 +13,8 @@ export default class ImagePicker extends CustomElement {
     model: any;
     width: any;
     height: any;
+    data: Model;
+    nonce: string;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * @param {Event} ev
@@ -22,10 +24,7 @@ export default class ImagePicker extends CustomElement {
      * @param {InputEvent} ev
      */
     updateFilePreview(ev: InputEvent): void;
-    data: {
-        data_uri: string | ArrayBuffer;
-        image_type: string;
-    };
 }
 import { CustomElement } from "./element.js";
+import { Model } from "@converse/skeletor";
 //# sourceMappingURL=image-picker.d.ts.map