Home:ALL Converter>Excel upload using Angular2(Frontend) and Springboot (Backend)

Excel upload using Angular2(Frontend) and Springboot (Backend)

Ask Time:2017-10-04T20:12:10         Author:user3668556

Json Formatter

Hi I am new to angular2 and I am trying to upload an excel from an angular2 frontend .What exactly I want to achieve is , upload the excel from angular2 frontend pass it to Springboot in backend ,inside springboot 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 springboot 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 recieve 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 angular2

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();

    }

Springboot Controller to recieve 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 springboot ??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 springboot 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 , thanks

Author:user3668556,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/46564581/excel-upload-using-angular2frontend-and-springboot-backend
hrdkisback :

Try this, appService\n\nsendFile(fileObj : File){\n let headers = new Headers();\n let options = new RequestOptions({ headers: headers }); \n\n let formData = new FormData();\n formData.append('file', fileObj);\n\n return this.http.post('http://localhost:9000/submitexcel', formData, options).map(res => res.json().data).subscribe();\n}\n\n\nSpring Controller\n\n@RestController\npublic class ExcelUploadController {\n\n @RequestMapping(method = RequestMethod.POST , value=\"/submitexcel\")\n public ResponseEntity<String> getFile(@RequestParam MultipartFile file){\n System.out.println(file.getOriginalFilename());\n }\n}\n",
2017-10-04T12:35:44
yy