diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx index a696c34897..3fe5296411 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx @@ -62,6 +62,9 @@ export const PromptBox = () => { const [isEnqueueing, setisEnqueueing] = useState(false); const [useSystemPrompt, setUseSystemPrompt] = useState(true); const [referenceImages, setReferenceImages] = useState([]); + const [uploadingImages, setUploadingImages] = useState< + { id: string; file: File }[] + >([]); const [aspectRatioList, setAspectRatioList] = useState([ { label: "3:2", @@ -212,6 +215,9 @@ export const PromptBox = () => { const files = event.target.files; if (files) { Array.from(files).forEach((file) => { + const uploadId = Math.random().toString(36).substring(7); + setUploadingImages((prev) => [...prev, { id: uploadId, file }]); + const reader = new FileReader(); reader.onloadend = () => { uploadImage({ @@ -227,9 +233,18 @@ export const PromptBox = () => { mediaToken: newState.data || "", }; setReferenceImages((prev) => [...prev, referenceImage]); + setUploadingImages((prev) => + prev.filter((img) => img.id !== uploadId), + ); console.log("Reference image added:", referenceImage); - } else { - console.error("No data from uploadImage"); + } else if ( + newState.status === UploaderStates.assetError || + newState.status === UploaderStates.imageCreateError + ) { + setUploadingImages((prev) => + prev.filter((img) => img.id !== uploadId), + ); + console.error("Upload failed"); } }, }); @@ -386,7 +401,7 @@ export const PromptBox = () => { return (
- {referenceImages.length > 0 && ( + {(referenceImages.length > 0 || uploadingImages.length > 0) && (
{referenceImages.map((image) => (
{
))} + {uploadingImages.map(({ id, file }) => { + const previewUrl = URL.createObjectURL(file); + return ( +
+
+ Uploading preview +
+
+ +
+
+ ); + })}
)}
@@ -452,11 +490,9 @@ export const PromptBox = () => { onPaste={handlePaste} onKeyDown={handleKeyDown} onFocus={() => { - console.log("disabling hotkeys"); disableHotkeyInput(DomLevels.INPUT); }} onBlur={() => { - console.log("enabling hotkeys"); enableHotkeyInput(DomLevels.INPUT); }} />