Forge app custom UI, in backend code how to get file in frontend?

I build a forge app with custom UI which get a file from user then upload to a confluence page.
I cannot achieve this because

  1. In frontend cannot make a request to post the file to confluence page (because it violates the following Content Security Policy directive: "connect-src ‘self’)
  2. In backend it can post a file to confluence page but in backend cannot get the file from frontend via payload, it is empty object


function App() {
  const onAdd = async (event: ChangeEvent<HTMLInputElement>) => {
    try {
      const file =[0] as File;
      const fileName =;

      const response = await uploadFileToConfluencePage(file, fileName);
    } catch (error) {
      console.log('Failed to upload files');

  return (
      <input type="file" onChange={onAdd} />

export default App;


resolver.define('uploadFileToConfluencePage', async (req) => {
  const { file, fileName } = req.payload;

Hi all,

Is there anyone facing same issue? or in such a use case that in the Jira forge app, upload file to Confluence page. Is there any achievable approach?