DOMException: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker

Question

I unable to solve this issue while working on react ts pwa app.

Since the current scenarios is : I am using 2 application, one is Global app and another one is children app.

The children app is opening in iFrame.

when I perform the download file operation, I added a code for save file picker like this :

export async function downloadPhoto(selectedImageBlob: any,downloadPhotoName:any) {   try {
    const handle = await showSaveFilePicker({
      suggestedName: downloadPhotoName,
      types: [
        { accept: { "image/png": [".png"] } },
        { accept: { "image/jpg": [".jpg"] } },
        { accept: { "image/jpeg": [".jpeg"] } },
        { accept: { "image/webp": [".webp"] } },
      ],
      excludeAcceptAllOption: false,
    });
    const writableStream = await handle.createWritable();
    await writableStream.write(selectedImageBlob);
    await writableStream.close();   } catch (err) {
    console.error(err);   }

}

after app start and perform the download functionality this function showSaveFilePicker() is creating an exception like this :

index.js:1 DOMException: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker.
    at downloadPhoto (http://localhost:3001/static/js/main.chunk.js:53502:26)
    at onClick (http://localhost:3001/static/js/main.chunk.js:32079:111)
    at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/vendors~main.chunk.js:240900:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/vendors~main.chunk.js:240944:20)
    at invokeGuardedCallback (http://localhost:3001/static/js/vendors~main.chunk.js:241001:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3001/static/js/vendors~main.chunk.js:241015:29)
    at executeDispatch (http://localhost:3001/static/js/vendors~main.chunk.js:245159:7)
    at processDispatchQueueItemsInOrder (http://localhost:3001/static/js/vendors~main.chunk.js:245185:11)
    at processDispatchQueue (http://localhost:3001/static/js/vendors~main.chunk.js:245196:9)
    at dispatchEventsForPlugins (http://localhost:3001/static/js/vendors~main.chunk.js:245205:7)
    at http://localhost:3001/static/js/vendors~main.chunk.js:245365:16
    at batchedUpdates$1 (http://localhost:3001/static/js/vendors~main.chunk.js:259757:16)
    at batchedUpdates (http://localhost:3001/static/js/vendors~main.chunk.js:240748:16)
    at dispatchEventForPluginEventSystem (http://localhost:3001/static/js/vendors~main.chunk.js:245364:7)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (http://localhost:3001/static/js/vendors~main.chunk.js:242870:9)
    at dispatchEvent (http://localhost:3001/static/js/vendors~main.chunk.js:242864:9)
    at dispatchDiscreteEvent (http://localhost:3001/static/js/vendors~main.chunk.js:242841:9)
console.<computed> @ index.js:1
downloadPhoto @ util.tsx:49
await in downloadPhoto (async)
onClick @ Emergency.tsx:641
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430

I stuck in this problem. It clearly saying that the issue is related to use the app in iFrame. this line : Cross origin sub frames aren't allowed to show a file picker.

Can someone please help me on solving this problem. Is there any another way to solve.

Thanks in advance!