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

farokh veician · Accepted Answer · 2020-12-31 17:18:59Z

2

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")
            });
        }

answered Dec 31, 2020 at 17:18

farokh veician

2242 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno Miguel Over a year ago

Amazing deduction mate. Right in the spot! Thank you so much!!!

Collectives™ on Stack Overflow

Unable to upload file using Angular/Spring

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related