diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html index c188cb4ab2..dd9b12af7c 100644 --- a/tools/server/public_simplechat/index.html +++ b/tools/server/public_simplechat/index.html @@ -60,7 +60,7 @@
- file +
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js index 3d75ded4cc..dbd283ab5d 100644 --- a/tools/server/public_simplechat/simplechat.js +++ b/tools/server/public_simplechat/simplechat.js @@ -954,7 +954,22 @@ class MultiChatUI { this.elInToolName = /** @type{HTMLInputElement} */(document.getElementById("toolname-in")); this.elInToolArgs = /** @type{HTMLInputElement} */(document.getElementById("toolargs-in")); + // Save any placeholder set by default like through html, to restore where needed this.elInUser.dataset.placeholder = this.elInUser.placeholder + this.elInFileX = ui.el_creatediv_inputfile('file', 'file', '', ()=>{ + let f0 = this.elInFileX.el.files?.item(0); + if (!f0) { + return + } + console.log(`DBUG:InFileX:${f0?.name}`) + let fR = new FileReader() + fR.onload = () => { + this.me.dataURLs.push(fR.result) + console.log(`INFO:InFileX:Loaded file ${f0.name}`) + } + fR.readAsDataURL(f0) + }, "") + this.elBtnUser.parentElement?.appendChild(this.elInFileX.elB) this.validate_element(this.elInSystem, "system-in"); this.validate_element(this.elDivChat, "chat-div"); @@ -1552,6 +1567,10 @@ export class Me { //"presence_penalty": 1.2, }; this.toolsMgr = new mTools.ToolsManager() + /** + * @type {(string | ArrayBuffer | null)[]} + */ + this.dataURLs = [] } /** diff --git a/tools/server/public_simplechat/ui.mjs b/tools/server/public_simplechat/ui.mjs index fb447d3e6e..cbd8c578e6 100644 --- a/tools/server/public_simplechat/ui.mjs +++ b/tools/server/public_simplechat/ui.mjs @@ -232,6 +232,26 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className= } +/** + * Create a div wrapped input of type file, + * which hides input and shows a button which chains to underlying file type input. + * @param {string} id + * @param {string} label + * @param {any} defaultValue + * @param {(arg0: any) => void} cb + * @param {string} className + */ +export function el_creatediv_inputfile(id, label, defaultValue, cb, className) { + let elX = el_creatediv_input(id, label, "file", defaultValue, cb, className) + elX.el.hidden = true + let idB = `${id}-button` + let elB = el_create_button(idB, (mev) => { + elX.el.click() + }, idB, label) + return { div: elX.div, el: elX.el, elB: elB }; +} + + /** * Auto create ui input elements for specified fields/properties in given object * Currently supports text, number, boolean field types.