sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats 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>}
</>
);
}