I want to get Image from my active document and get base64 string out of it

Photoshop UXP Plugin API
,
1

Hi all,
I have a requirement to get base64String of the image in my active document as I want to upload that image to a s3 bucket. I added some piece of code using one of the discussion threads.
const SubmitJobHandler = () => {

const [jobStatus, setJobStatus] = useState(“”);
/endpoints intergeration/
const handleSubmitJob = async () => {
setJobStatus(“”);
try {
const activeDocument = app.activeDocument;
const activeLayer = activeDocument.activeLayers[0];
if (!activeDocument) {
console.log(“No active document found.”);
return;
}

        const filePath = app.activeDocument.path;
        const pixels = await imaging.getPixels({
            documentID: app.activeDocument.id,
            layerID: activeLayer.id,
            applyAlpha: false
        })
        const dataImage = await pixels.imageData.getData()
        const imageBlob = new ImageBlob(dataImage, pixels.imageData)
        const dataUrl = URL.createObjectURL(imageBlob)
        console.log("current file path",dataUrl);
        const base64_string = BASE64_STRING;
        await addDataAndGetJobId();

    } catch (error) {   
        console.error("Error while handling job:", error);
    }
};
return (
    <>
        <button onClick={() => handleSubmitJob()}>Upload Image</button>
        <div>Your submitted job status is: {jobStatus}</div>
    </>
);

}

export default SubmitJobHandler;

For this I get error as
SubmitJobHandler.jsx?09fa:105 Error while handling job: Error: The requested functionality is only allowed from inside a modal scope. See https://www.adobe.com/go/ps_executeasmodal for details.

2

The error is pretty self explanatory - see the link it provides.
You need to put PS into a blocking modal state and you use executeAsModal to do so.
There are loads of threads on this subject already in the forum is you have a little search.