Add upload button and support text files

Previously we could drag and drop image files, as well as paste them, in
the new llamafiler web ui. Now there's an upload paperclip icon, to make
this feature more obvious. Text files are now supported too, in addition
to images, which can be helpful for summarization.

Author: jart

llamafile/server/www/chatbot.css

@@ -482,6 +482,20 @@ ul li:first-child {
   background: #0b5ed7;
 }
 
+.upload-button {
+  padding-left: .5rem;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: color 0.2s;
+}
+
+.upload-button:hover {
+  color: #0d6efd;
+}
+
 .mode-dropdown {
   display: none;
 }

llamafile/server/www/chatbot.js

@@ -47,6 +47,8 @@ const completionsInput = document.getElementById("completions-input");
 const completeButton = document.getElementById("complete-button");
 const completionsSettingsButton = document.getElementById("completions-settings-button");
 const completionsStopButton = document.getElementById("completions-stop-button");
+const uploadButton = document.getElementById("upload-button");
+const fileUpload = document.getElementById("file-upload");
 
 let abortController = null;
 let disableAutoScroll = false;
@@ -308,19 +310,26 @@ async function fixImageDataUri(dataUri, maxLength = 1024 * 1024) {
 }
 
 async function onFile(file) {
-  if (!file.type.toLowerCase().startsWith('image/')) {
-    console.warn('Only image files are supported');
+  const reader = new FileReader();
+  if (file.type.toLowerCase().startsWith('image/')) {
+    reader.onloadend = async function() {
+      const description = file.name;
+      const realDataUri = await fixImageDataUri(reader.result);
+      const fakeDataUri = 'data:,placeholder/' + generateId();
+      uploadedFiles.push([fakeDataUri, realDataUri]);
+      insertText(chatInput, `![${description}](${fakeDataUri})`);
+    };
+    reader.readAsDataURL(file);
+  } else if (file.type.toLowerCase().startsWith('text/')) {
+    reader.onloadend = function() {
+      const content = reader.result;
+      insertText(chatInput, `\`\`\`\n${content}\n\`\`\``);
+    };
+    reader.readAsText(file);
+  } else {
+    console.warn('Only image and text files are supported');
     return;
   }
-  const reader = new FileReader();
-  reader.onloadend = async function() {
-    const description = file.name;
-    const realDataUri = await fixImageDataUri(reader.result);
-    const fakeDataUri = 'data:,placeholder/' + generateId();
-    uploadedFiles.push([fakeDataUri, realDataUri]);
-    insertText(chatInput, `![${description}](${fakeDataUri})`);
-  };
-  reader.readAsDataURL(file);
 }
 
 function insertText(elem, text) {
@@ -676,6 +685,17 @@ async function chatbot() {
   document.addEventListener("drop", onDragEnd);
   document.addEventListener("drop", onDrop);
   document.addEventListener("paste", onPaste);
+
+  uploadButton.addEventListener("click", () => {
+    fileUpload.click();
+  });
+
+  fileUpload.addEventListener("change", (e) => {
+    if (e.target.files[0]) {
+      onFile(e.target.files[0]);
+      e.target.value = '';
+    }
+  });
 }
 
 chatbot();

llamafile/server/www/index.html

@@ -32,7 +32,9 @@ <h1>
     <button class="send-button" id="send-button">Send</button>
     <button class="stop-button" id="stop-button" style="display:none">Stop</button>
     <button class="settings-button" id="settings-button" title="Settings">⚙️</button>
+    <button class="upload-button" id="upload-button">📎</button>
     <button class="redo-button" id="redo-button" title="Redo last message">↺</button>
+    <input type="file" id="file-upload" accept="image/*,text/*" style="display: none">
   </div>
 </div>