0

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.

greybeard
  • 2,249
  • 8
  • 30
  • 66
user3668556
  • 55
  • 3
  • 12
  • What excel files are you trying to send? .xls? Can you try not specifying the content-type and see what happens? or try 'Content-Type': undefined – prettyvoid Oct 04 '17 at 12:31

2 Answers2

0

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());
   }
}
hrdkisback
  • 898
  • 8
  • 19
  • let options = new RequestOptions({ headers: headers }); - this is giving error ->Argument of type '{headers: Headers}' is not assignalble to parameter of type 'RequestOptionsArgs' .Property null is missing in type '{headers : Headers}' – user3668556 Oct 06 '17 at 06:41
  • have you imported `import { Headers, RequestOptions } from '@angular/http';` ? – hrdkisback Oct 06 '17 at 07:31
  • yes ,I Have done that ,.Is it possible to do the whole porcessing in Aangular2 itself ??without sending the excel to backend ? I want to import the excel and show it on frontend ,,, along with some columns marked red based on my business rules .This is my requirement ,CAN YOU SUGGEST AN APPROACH FOR THIS . – user3668556 Oct 06 '17 at 07:46
0

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.

prettyvoid
  • 3,446
  • 6
  • 36
  • 60
  • When I used content-type : undefined then I got error on Springboot - current request is not a multipart request . – user3668556 Oct 06 '17 at 06:45
  • Is it possible to do the whole porcessing in Aangular2 itself ??without sending the excel to backend ? I want to import the excel and show it on frontend ,,, along with some columns marked red based on my business rules .This is my requirement ,CAN YOU SUGGEST AN APPROACH FOR THIS . – – user3668556 Oct 06 '17 at 08:06