From 915a929081b934c5efcea08abeed3fc7f4e8c027 Mon Sep 17 00:00:00 2001
From: Konuralp0 <konuralpcelikyay@gmail.com>
Date: Fri, 27 Sep 2024 09:22:29 +0200
Subject: [PATCH] enabled sending the same image for various browsers

---
 .../frontend/src/MultimodalChatInput.tsx      | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/st_multimodal_chatinput/frontend/src/MultimodalChatInput.tsx b/st_multimodal_chatinput/frontend/src/MultimodalChatInput.tsx
index 54d475c2..a14963f0 100644
--- a/st_multimodal_chatinput/frontend/src/MultimodalChatInput.tsx
+++ b/st_multimodal_chatinput/frontend/src/MultimodalChatInput.tsx
@@ -23,6 +23,8 @@ class MultimodalChatInput extends StreamlitComponentBase<State> {
     cursor: "not-allowed",
   };
 
+  private fileInputRef = React.createRef<HTMLInputElement>();
+
   public state: State = {
     uploadedFiles: [],
     textInput: "",
@@ -34,6 +36,10 @@ class MultimodalChatInput extends StreamlitComponentBase<State> {
 
   handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.processFiles(event.target.files);
+
+    if (this.fileInputRef.current) {
+      this.fileInputRef.current.value = "";  // Reset the file input to allow same file selection
+    }
   };
 
   handleRemoveFile = (indexToRemove: number) => {
@@ -53,6 +59,11 @@ class MultimodalChatInput extends StreamlitComponentBase<State> {
       uploadedFiles: [],
       textInput: ""
     });
+
+    // Reset the file input after submission
+    if (this.fileInputRef.current) {
+      this.fileInputRef.current.value = "";
+    }
   };
 
   handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -92,10 +103,10 @@ class MultimodalChatInput extends StreamlitComponentBase<State> {
   };
 
   public render = (): ReactNode => {
-    const disabled = this.props.args["disabled"]
-    const placeholder = this.props.args["placeholder"]
+    const disabled = this.props.args["disabled"];
+    const placeholder = this.props.args["placeholder"];
     const isDisabled = this.props.disabled || disabled;
-    const width = this.props.width
+    const width = this.props.width;
 
     return (
       <div style={{ position: "relative", display: "flex", flexDirection: "column", border: "1px solid gray", borderRadius: "8px", padding: "8px", width: width }} >
@@ -123,7 +134,15 @@ class MultimodalChatInput extends StreamlitComponentBase<State> {
           {/* File Upload Button */}
           <label style={{ marginRight: "10px", ...(isDisabled ? this.disabledStyle : {}) }}>
             📎
-            <input disabled={isDisabled} type="file" accept="image/*,.pdf,.docx,.xlsx" multiple onChange={this.handleFileChange} style={{ display: "none" }} />
+            <input
+              disabled={isDisabled}
+              ref={this.fileInputRef}  // Reference the input element
+              type="file"
+              accept="image/*,.pdf,.docx,.xlsx"
+              multiple
+              onChange={this.handleFileChange}
+              style={{ display: "none" }}
+            />
           </label>
 
           {/* Textarea for Chat */}