kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

move paste image logic to hook + remove unneeded

Browse Source
This commit is contained in:
shatfield4 2024-09-19 12:07:32 -07:00
parent f0b5cbf010
commit 9c3cef242f
4 changed files with 30 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
embed

@ -1 +1 @@
Subproject commit 64faa5b647cc6d7356204ba8ebbad567ee505a0a Subproject commit 6bd51d251ff1b204d7d88cdda0061df00676386e

24
frontend/src/components/WorkspaceChat/ChatContainer/DnDWrapper/index.jsx
View File

@ -5,6 +5,7 @@ import { useDropzone } from "react-dropzone";
import DndIcon from "./dnd-icon.png"; import DndIcon from "./dnd-icon.png";
import Workspace from "@/models/workspace"; import Workspace from "@/models/workspace";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import { useImagePaste } from "@/hooks/useImagePaste";
export const DndUploaderContext = createContext(); export const DndUploaderContext = createContext();
export const REMOVE_ATTACHMENT_EVENT = "ATTACHMENT_REMOVE"; export const REMOVE_ATTACHMENT_EVENT = "ATTACHMENT_REMOVE";
@ -161,7 +162,7 @@ export function DnDFileUploaderProvider({ workspace, children }) {
export default function DnDFileUploaderWrapper({ children }) { export default function DnDFileUploaderWrapper({ children }) {
const { onDrop, ready, dragging, setDragging } = useContext(DndUploaderContext); const { onDrop, ready, dragging, setDragging } = useContext(DndUploaderContext);
const { getRootProps, getInputProps, inputRef } = useDropzone({ const { getRootProps, getInputProps } = useDropzone({
onDrop, onDrop,
disabled: !ready, disabled: !ready,
noClick: true, noClick: true,
@ -170,26 +171,9 @@ export default function DnDFileUploaderWrapper({ children }) {
onDragLeave: () => setDragging(false), onDragLeave: () => setDragging(false),
}); });
useEffect(() => { useImagePaste((file) => {
const handlePasteAnywhere = (e) => {
const items = e.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image/') !== -1) {
e.preventDefault();
const blob = items[i].getAsFile();
const fileName = blob.name !== "image.png" ? blob.name : `pasted-image.${blob.type.split('/')[1]}`;
const file = new File([blob], fileName, { type: blob.type });
onDrop([file], []); onDrop([file], []);
break; });
}
}
};
document.addEventListener('paste', handlePasteAnywhere);
return () => {
document.removeEventListener('paste', handlePasteAnywhere);
};
}, [onDrop]);
return ( return (
<div <div

25
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/AttachItem/index.jsx
View File

@ -1,7 +1,6 @@
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import { PaperclipHorizontal } from "@phosphor-icons/react"; import { PaperclipHorizontal } from "@phosphor-icons/react";
import { Tooltip } from "react-tooltip"; import { Tooltip } from "react-tooltip";
import { useEffect } from "react";
/** /**
* This is a simple proxy component that clicks on the DnD file uploader for the user. * This is a simple proxy component that clicks on the DnD file uploader for the user.
@ -11,30 +10,6 @@ export default function AttachItem() {
const { user } = useUser(); const { user } = useUser();
if (!!user && user.role === "default") return null; if (!!user && user.role === "default") return null;
const handlePaste = (e) => {
const items = e.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
const blob = items[i].getAsFile();
handleImagePaste(blob);
break;
}
}
};
useEffect(() => {
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, []);
const handleImagePaste = (blob) => {
const file = new File([blob], "pasted-image.png", { type: "image/png" });
document.getElementById("dnd-chat-file-uploader").files = new FileList([file]);
document.getElementById("dnd-chat-file-uploader").dispatchEvent(new Event('change', { bubbles: true }));
};
return ( return (
<> <>
<button <button

24
frontend/src/hooks/useImagePaste.js Normal file
View File

@ -0,0 +1,24 @@
import { useEffect } from 'react';
export function useImagePaste(onImagePaste) {
useEffect(() => {
const handlePaste = (e) => {
const items = e.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image/') !== -1) {
e.preventDefault();
const blob = items[i].getAsFile();
const fileName = blob.name !== "image.png" ? blob.name : `pasted-image.${blob.type.split('/')[1]}`;
const file = new File([blob], fileName, { type: blob.type });
onImagePaste(file);
break;
}
}
};
document.addEventListener('paste', handlePaste);
return () => {
document.removeEventListener('paste', handlePaste);
};
}, [onImagePaste]);
}