Unable to upload file using Angular/Spring

Question

The title says it all.

I need to upload files/documents to BE, somehow I just cant get it right!

Angular service

public saveFile(file: File): Observable<any> {
        const formData = new FormData();
        formData.append('file', file);
        
        return this.http
            .post<FormData>(`${environment.apiUrl}/save-file`, formData)
            .pipe(first());
    }

Spring Controller

 @PostMapping(value = "/save-file")
    public ResponseEntity<Object> saveFile(@RequestParam("file") MultipartFile file) {

        System.out.println(file);

        return null;
    }

I have already tried a lot of other configuration, like set headers to

"Content-Type": "multipart/form-data"

The error message is always the same:

Current request is not a multipart request

Answer 1

if your request body is instanceof FormData angular add that header for you . and you dont need to add header .

i think you have interceptor configuration to add some header to all your http requests. try to add this conditions to your interceptor class :

        if (!request.headers.has("Content-Type") && !(request.body instanceof FormData)) {
            request = request.clone({
               headers: request.headers.set("Content-Type", "application/json")
            });
        }