'How can i simulteaneosly post a multipart form and receive Server sent event notifications with Springboot and react
I am trying to upload a file from a react frontend to a springboot backend, whilst this is working well when i try to intergrate server sent event notifications i get the following problems. If i include the content type "text/event-stream" header i get an error that my request is no longer a multipart request and if i exclude the header completely i do not receive the notifications.
My front end:
function uploadFile(file){
const sse = new EventSource(`${apiConstants.API_BASE_URL}/api/uploadFile`,{ withCredentials: false });
function getRealtimeData(data) {
console.log(data)
}
sse.onmessage = e => getRealtimeData(e.data);
sse.onerror = (e) => {
// error log here
console.log(e)
sse.close();
}
const requestOptions = {
method: 'POST',
headers: {
// "Content-Type": "text/event-stream",
...authHeader()
},
body:file
};
return fetch(`${apiConstants.API_BASE_URL}/api/UploadFile`, requestOptions)
.then(handleProgressResponse)
.then(response => {
return response;
});
}
function handleProgressResponse(response) {
console.log(response)
return response.text().then(text => {
console.log(text)
const data = text ;
if (!response.ok){
if (response.status === 401) {
logout();
}
return Promise.reject(data);
}
return data;
})
}
my backend :
@RequestMapping("/api/UploadFile")
public SseEmitter UploadFile(@RequestParam("file") MultipartFile file) {
// validate file
final SseEmitter emitter = new SseEmitter(10000000L);
if (file.isEmpty()) {
emitter.completeWithError(new Exception("File is Empty Please try again"));
} else {
return UploadFile(file,emitter);
}
return emitter;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
