klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 13:18:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add drag/drop file upload support to the chat input area

Browse Source
This commit is contained in:
sabaimran
2024-08-07 18:50:19 +05:30
parent 370ebdee24
commit 93f4ceabc1
1 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -78,6 +78,7 @@ export default function ChatInputArea(props: ChatInputProps) {
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
const [progressValue, setProgressValue] = useState(0);
const [isDragAndDropping, setIsDragAndDropping] = useState(false);
useEffect(() => {
if (!uploading) {
@@ -123,6 +124,19 @@ export default function ChatInputArea(props: ChatInputProps) {
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
if (!event.target.files) return;
uploadFiles(event.target.files);
}
function handleDragAndDropFiles(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(false);
if (!event.dataTransfer.files) return;
uploadFiles(event.dataTransfer.files);
}
function uploadFiles(files: FileList) {
if (!props.isLoggedIn) {
setLoginRedirectMessage("Whoa! You need to login to upload files");
setShowLoginPrompt(true);
@@ -130,7 +144,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}
uploadDataForIndexing(
event.target.files,
files,
setWarning,
setUploading,
setError,
@@ -263,6 +277,16 @@ export default function ChatInputArea(props: ChatInputProps) {
Math.max(chatInputRef.current.scrollHeight - 24, 64) + "px";
}, [message]);
function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(true);
}
function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(false);
}
return (
<>
{showLoginPrompt && loginRedirectMessage && (
@@ -374,6 +398,9 @@ export default function ChatInputArea(props: ChatInputProps) {
)}
<div
className={`${styles.actualInputArea} items-center justify-between dark:bg-neutral-700`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDragAndDropFiles}
>
<input
type="file"
@@ -460,6 +487,7 @@ export default function ChatInputArea(props: ChatInputProps) {
<ArrowUp className="w-6 h-6" weight="bold" />
</Button>
</div>
{isDragAndDropping && <div className="text-muted-foreground">Drop file to upload</div>}
</>
);
}