Sending files from angular 6 application to spring boot web api "Required request part 'file' is not present"

Question

I'm trying to send an file from angular 6 front-end to spring boot web API. but it gives me following error

Bad Request","message":"Required request part 'file' is not present

here is my html code to upload file

<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" name="file" (change)="fileChange($event)" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
 </div>
<button (click)="uploadFile()" type="button" class="btn btn-primary">Upload</button>

here is my ts code

      formData:FormData = new FormData();
      readytoupload:boolean=false;

      fileChange(event) {
        let fileList: FileList = event.target.files;
        if(fileList.length > 0) {    
            let file: File = fileList[0];    
            this.formData.append('file', file);
            this.readytoupload =true;
        }
      }
      uploadFile(){
           if(this.readytoupload){
            this.featureservice.uploadFIle(this.formData).subscribe(data => {
              const a = data.json();
              this.goToProcess(a.process_id)
            });
           }
      }

Here is the angular serivice

  uploadFIle(formData:FormData){
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append("Content-Type", 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW');
    return this.http.post(this.url+'upload',formData,{headers: headers})
  };

this is the back-end controller

@CrossOrigin(origins = "*")
@PostMapping(value = "api/upload")
public String uploadReviews(@RequestParam("file") MultipartFile file, RedirectAttributes redirectAttributes) {    
    if (file.isEmpty()) {    
        return null;
    }    
    try {

        byte[] bytes = file.getBytes();
        Path path = Paths.get(uploadFolder + file.getOriginalFilename());
        uploadFile = path.toString();
        Files.write(path, bytes);
        sessionID = "6";   
    } catch (IOException e) {    
        e.printStackTrace();    
       return null;


    return sessionID;
}

above API service is perfectly working with Postman requests. But not working with angular requests.

Can any one please help me on this?

Did you find a solution ?

Sandwell
– Sandwell

2019-09-12 13:51:15 +00:00
Commented Sep 12, 2019 at 13:51 — Sandwell
– Sandwell, Commented Sep 12, 2019 at 13:51

adiga · Accepted Answer · 2019-06-28 11:27:10Z

1

Instead of this :-

return this.http.post(this.url+'upload',formData,{headers: headers})

Use this :-

return this.http.post(this.url+'upload',{"file" : formData},{headers: headers})

Hope this helps

edited Jun 28, 2019 at 11:27

adiga

35.4k9 gold badges66 silver badges88 bronze badges

answered Jun 28, 2019 at 11:17

Susheel Dwivedi

945 bronze badges

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

Comments

Suraj Rao · Accepted Answer · 2021-01-25 13:50:21Z

0

this worked for me

downloadPdf(file: File): Observable<HttpEvent<any>>{

    const formData: FormData = new FormData();
    formData.append('file', file);
    const req = new HttpRequest('POST', `${this.url}/upload`, formData, {
      reportProgress: true,
      responseType: 'arraybuffer' as 'json'
    });
     return this.http.request(req);
}

edited Jan 25, 2021 at 13:50

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jan 25, 2021 at 13:39

shubham

857 bronze badges

Collectives™ on Stack Overflow

Sending files from angular 6 application to spring boot web api "Required request part 'file' is not present"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related