jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: playground page allowing image upload even if feature flag is disabled (#7877)

Browse source 
* Fix use drag and drop to check for playground page

* fix chat input to change file only if enable_image_on_playground is enabled and its on playground page

* change input wrapper to show upload file if constant is enabled

* changed onDrop to not allow sending files if enable_image_on_playground is disabled
This commit is contained in:
Lucas Oliveira 2025-05-02 16:05:32 -03:00 • committed by GitHub
commit 296d285555
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx
View file

@ -1,4 +1,5 @@
import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file"; import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
import useFileSizeValidator from "@/shared/hooks/use-file-size-validator"; import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
import useAlertStore from "@/stores/alertStore"; import useAlertStore from "@/stores/alertStore";
import useFlowStore from "@/stores/flowStore"; import useFlowStore from "@/stores/flowStore";
@ -64,7 +65,7 @@ export default function ChatInput({
const handleFileChange = async ( const handleFileChange = async (
event: React.ChangeEvent<HTMLInputElement> | ClipboardEvent, event: React.ChangeEvent<HTMLInputElement> | ClipboardEvent,
) => { ) => {
if (playgroundPage) { if (playgroundPage && !ENABLE_IMAGE_ON_PLAYGROUND) {
return; return;
} }

3
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx
View file

@ -84,7 +84,8 @@ const InputWrapper: React.FC<InputWrapperProps> = ({
</div> </div>
<div className="flex w-full items-end justify-between"> <div className="flex w-full items-end justify-between">
<div className={isBuilding ? "cursor-not-allowed" : ""}> <div className={isBuilding ? "cursor-not-allowed" : ""}>
{!playgroundPage && ENABLE_IMAGE_ON_PLAYGROUND && ( {(!playgroundPage ||
(playgroundPage && ENABLE_IMAGE_ON_PLAYGROUND)) && (
<UploadFileButton <UploadFileButton
isBuilding={isBuilding} isBuilding={isBuilding}
fileInputRef={fileInputRef} fileInputRef={fileInputRef}

10
src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts
View file

@ -1,8 +1,11 @@
import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags"; import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
const useDragAndDrop = (setIsDragging: (value: boolean) => void) => { const useDragAndDrop = (
setIsDragging: (value: boolean) => void,
playgroundPage: boolean,
) => {
const dragOver = (e) => { const dragOver = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) return; if (!ENABLE_IMAGE_ON_PLAYGROUND && playgroundPage) return;
e.preventDefault(); e.preventDefault();
if (e.dataTransfer.types.some((type) => type === "Files")) { if (e.dataTransfer.types.some((type) => type === "Files")) {
setIsDragging(true); setIsDragging(true);
@ -10,7 +13,7 @@ const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
}; };
const dragEnter = (e) => { const dragEnter = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) return; if (!ENABLE_IMAGE_ON_PLAYGROUND && playgroundPage) return;
if (e.dataTransfer.types.some((type) => type === "Files")) { if (e.dataTransfer.types.some((type) => type === "Files")) {
setIsDragging(true); setIsDragging(true);
} }
@ -18,6 +21,7 @@ const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
}; };
const dragLeave = (e) => { const dragLeave = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND && playgroundPage) return;
e.preventDefault(); e.preventDefault();
setIsDragging(false); setIsDragging(false);
}; };

7
src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
View file

@ -148,10 +148,13 @@ export default function ChatView({
const { files, setFiles, handleFiles } = useFileHandler(currentFlowId); const { files, setFiles, handleFiles } = useFileHandler(currentFlowId);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const { dragOver, dragEnter, dragLeave } = useDragAndDrop(setIsDragging); const { dragOver, dragEnter, dragLeave } = useDragAndDrop(
setIsDragging,
!!playgroundPage,
);
const onDrop = (e) => { const onDrop = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) { if (!ENABLE_IMAGE_ON_PLAYGROUND && playgroundPage) {
e.stopPropagation(); e.stopPropagation();
return; return;
} }