file picker logic

qortal-ui-core/language/us.json

@@ -486,7 +486,8 @@
       "cchange24": "Maximum Characters per message is 255",
       "cchange25": "Edit Message",
       "cchange26": "File size exceeds 5 MB",
-      "cchange27": "A registered name is required to send images"
+      "cchange27": "A registered name is required to send images",
+      "cchange28": "This file is not an image"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -210,10 +210,28 @@ class ChatPage extends LitElement {
         }
 
         .send-icon:hover {
-            cursor: pointer;
             filter: brightness(1.1);
         }
+        .file-picker-container {
+            position: relative;
+            height: 25px;
+            width: 25px;
+        }
+        .file-picker-input-container {
+            position: absolute;
+            top: 0px;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            z-index: 10;
+            opacity: 0;
+            overflow: hidden;
+        }
 
+        input[type=file]::-webkit-file-upload-button { 
+    cursor: pointer; 
+}
+        
         `
     }
 
@@ -256,11 +274,12 @@ class ChatPage extends LitElement {
             <div class="chat-container">
                 <div>
                     ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
-                    <mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}>
+                    <mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> {
+                        this.imageFile = null
+                    }}>
 					<div class="dialog-header">
 					</div>
 					<div class="dialog-container">
-						hello
                         ${this.imageFile && html`
                         <img src=${URL.createObjectURL(this.imageFile)} />
                         `}
@@ -330,12 +349,23 @@ class ChatPage extends LitElement {
                                 </div>
                             `}
                         <div class="chatbar">
+                            <div class="file-picker-container">
                             <vaadin-icon
                             class="paperclip-icon"
                             icon="vaadin:paperclip"
                             slot="icon"
                             @click=${() => this.closeEditMessageContainer()}
-                            ></vaadin-icon>
+                            >
+                        </vaadin-icon>
+                        <div class="file-picker-input-container">
+                        <input 
+                        .value="${this.imageFile}"
+                        @change="${e => this.insertImage(e.target.files[0])}"
+                        class="file-picker-input" type="file" name="myImage" accept="image/*" />
+                        </div>
+                        
+                            </div>
+                            
                             <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
                             <iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
                             </iframe>
@@ -376,13 +406,19 @@ class ChatPage extends LitElement {
 
 
     insertImage(file){
-        this.imageFile = file
         
+        if(file.type.includes('image')){
+            this.imageFile = file
+
+            return
+        }
+        
+        parentEpml.request('showSnackBar', get("chatpage.cchange28"))
         
     }
 
 
-
+  
     async firstUpdated() {
        
         // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -371,5 +371,6 @@ export const chatStyles = css`
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		height: 80vh;
 	}
 `

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -256,7 +256,6 @@ class MessageTemplate extends LitElement {
         imageHTMLRes.onclick= ()=> {
             this.openDialogImage = true
         }
-        let p = 0
         imageHTMLRes.onerror = ()=> {   
  
             console.log('inputRef', this.imageFetches)
@@ -270,8 +269,10 @@ class MessageTemplate extends LitElement {
                
             } else {
                 imageHTMLRes.src = '/img/chain.png'
-                imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; filter: opacity(0.5)"
-                ;
+                imageHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
+                imageHTMLRes.onclick= ()=> {
+                    
+                }
             }
            
         }
@@ -287,8 +288,9 @@ class MessageTemplate extends LitElement {
              imageUrl = `${nodeUrl}/arbitrary/${image.service}/${image.name}/${image.identifier}?async=true&apiKey=${myNode.apiKey}`
             imageHTML = createImage(imageUrl)
             imageHTMLDialog = createImage(imageUrl)
-            imageHTMLDialog.style= "height: 80vh ; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px"
+            imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px"
         }
+
      
 
         if (this.messageObj.sender === this.myAddress) {