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
- 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’)
- 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
App.tsx
function App() {
const onAdd = async (event: ChangeEvent<HTMLInputElement>) => {
try {
const file = event.target.files?.[0] as File;
const fileName = file.name;
console.log(file);
console.log(fileName);
const response = await uploadFileToConfluencePage(file, fileName);
console.log(response);
} catch (error) {
console.log('Failed to upload files');
console.error(error);
}
};
return (
<div>
<input type="file" onChange={onAdd} />
</div>
);
}
export default App;
index.js
resolver.define('uploadFileToConfluencePage', async (req) => {
const { file, fileName } = req.payload;
console.log(req.payload);
});
