Error in File Upload from Angular 2 with Spring boot Rest API

Question

I am trying to upload a profile image from Angular2 and Backend is in Spring Boot Rest APIs which is supporting multipart data. I am failed to receive request on backend and the chrome return with error of 400.

The code is given below:

Frontend:

HTML:

<input class="file" type="file" (change)="uploadProfileImgOnChange($event)">

TS:

uploadProfileImgOnChange(event: any) {
        let fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            this.file = fileList[0];

            this.requestsService.postRequestMultipartFormData(
                '/admin/uploadProfileImg/' + this.id
                , this.file)
                .subscribe(
                    (response: Response) => {
                        if (response['responseCode'] === 'ADM_SUC_08') {
                            console.log();
                        }
                    },
                    (error: any) => {
                        this.apUtilServer.tokenExpired(error.json()['error']);
                        //console.log(error.json())
                    }
                );
}
}

 postRequestMultipartFormData(url: any, data: any) {
        data = this.removeUndefined(data);
        var formData = new FormData();
        const headers = new Headers();
        formData.append('file', data, data.name);
        if (this.getToken()) {
            headers.append('Authorization', 'Bearer ' + this.getToken());
        }
        headers.append('Accept', 'application/json');
        console.log(headers);
        return this.http.post('http://127.0.0.1:8080/AdminPortal/admin/' + url, formData, {headers: headers})
            .map((response: Response) => {
                return response.json();
            })
    }

Backend:

@RequestMapping(value = "/uploadProfileImg/{id}", method = RequestMethod.POST)
    public ResponseEntity<?> uploadProfileImage(HttpServletRequest request,
                                                @PathVariable("id") long id,
                                                @RequestParam("file") MultipartFile file) {
        logger.info("Update Admin API called {" + id);

Thanks in advance.

No issue in URL so please ignore to do childesh comments.

score 0 · Answer 1 · answered Aug 01 '17 at 17:56

I had problems with Angular4 to upload files to Spring Boot. I found a post here that solved my problem.

Here is the original post: https://stackoverflow.com/a/35669598/1474815

Here is the code I used to post the file. It works like a charm.

uploadFile(file:File):Promise<MyEntity> {
    return new Promise((resolve, reject) => {

        let xhr:XMLHttpRequest = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(<MyEntity>JSON.parse(xhr.response));
                } else {
                    reject(xhr.response);
                }
            }
        };

        xhr.open('POST', this.getServiceUrl(), true);

        let formData = new FormData();
        formData.append("file", file, file.name);
        xhr.send(formData);
    });
}

Error in File Upload from Angular 2 with Spring boot Rest API

1 Answers1