Excel upload using Angular2(Frontend) and Spring Boot (Backend)

Question

I am new to Angular 2 and I am trying to upload an Excel from Angular 2 frontend.
I want to upload the Excel from Angular 2 frontend, pass it to Spring Boot in backend, inside Spring Boot I will make necessary changes. Finally pass it back to angular to render it on screen.

My Approach:
let user select the Excel from frontend
POST it to Spring Boot backend, make necessary modification using Apache POI
Finally pass it to angular again to render it on screen.

Problem Area :-

I have made the frontend part to receive input

below is my code :-

     <input type="file" id="myfile" class="form-control" [(ngModel)]="fileObj" (change)="upload($event)" accept=".xlsx">

Angular Component method to called on change of element :-

    file: File
    upload(event : EventTarget){
    
    let eventObj : MSInputMethodContext = <MSInputMethodContext> event ;
    let target : HTMLInputElement = <HTMLInputELement>  eventObj.target ;
    let files : FileList = target.files ;
    this.file = files[0];
    this._appService.sendFile(this.file);
    
    }

above functions calls the sendFile method in appservice of Angular 2

below is the code for appService :-

    private headers = new Headers({'Content-Type' : 'multipart/form-data'});
    
    sendFile(fileObj : File){
    return this.http.post('http://localhost:9000/submitexcel', fileObj, {headers : this.headers}).map(res => res.json().data).subscribe();
    
    }

Spring Boot Controller to receive the incoming file.

@RestController
public class ExcelUploadController {

@RequestMapping(method = RequestMethod.POST , value="/submitexcel")
public ResponseEntity<String> getFile(@RequestParam("File") MultipartFile file){
System.out.println("inside controller");
}
}

whenever I make a call to controller, I get error on console :-

"the request was rejected because no multipart boundary was found "

Now below are my problem questions :-

1. Am I not sending the Excel file properly to Spring Boot?
   If not please let me know the correct way to do it.

2. Is my approach correct to achieve what is required?

3. How will I send the Excel back from Spring Boot to angular to display on Frontend?

I tried googling a lot about this, but could not find anything useful

Please help me, I am stuck since many days.

Answer 1

Try this, appService

sendFile(fileObj : File){
    let headers = new Headers();
    let options = new RequestOptions({ headers: headers }); 

    let formData = new FormData();
    formData.append('file', fileObj);

    return this.http.post('http://localhost:9000/submitexcel', formData, options).map(res => res.json().data).subscribe();
}

Spring Controller

@RestController
public class ExcelUploadController {

   @RequestMapping(method = RequestMethod.POST , value="/submitexcel")
   public ResponseEntity<String> getFile(@RequestParam MultipartFile file){
      System.out.println(file.getOriginalFilename());
   }
}

Answer 2

Most likely the problem is that you're explicitly specifying the Content-Type, try {'Content-Type' : undefined}, this will let the browser determine the proper Content-Type

I don't see anything wrong with the approach. As for how the your client is going to receive the modified excel back then you'll either have to respond with the excel for that same request that submitted the excel or you'll have to let your server serve the excel file on another callback.