0

I am trying send excell from Angular2 to Server SpringBoot , but I get error 500 :

HTML:

    <form #fileLoad="ngForm" (ngSubmit)="addExcell()">
      <input type="file" id="file" name="file"  class="form-control" (change)="fileChange($event)"  accept=".xlsx">
      <button class="btn btn-sm btn-outline btn-block">Add</button>
    </form>             

Then I select a File.xlsx



fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      this.formData.append('uploadFile', file, file.name);
    }
  } 

I do click in Add

  addExcell() {
    const url = "http://localhost:8080/ml/insert";
    this.service.sendFile(url, this.formData).subscribe(data => {
        console.log(data);
      }
    );
  }

In my service I config headers and send to SpringBoot

sendFile(url, myFile) {
    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    return this.http2.post(url,   myFile , { headers: headers });
  }

Finally in my SpringBoot:

@RestController
@RequestMapping(value = { "/ml" })
@CrossOrigin
public class MyFile{

        @RequestMapping(method = RequestMethod.POST, value = "/insert" , headers = "Content-Type= multipart/form-data", produces = MediaType.APPLICATION_JSON_VALUE)
        @ResponseBody
        public String insert(@RequestBody MultipartFile multipart) {

            System.out.println("file" + multipart);
            return "SpringBoot";

        }
}

Finally I get error in HTML :

enter image description here

In my SpringBoot y get :

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.tomcat.util.http.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:831) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:256) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.http.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:280) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.parseParts(Request.java:2869) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.parseParameters(Request.java:3216) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.Request.getParameter(Request.java:1137) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.RequestFacade.getParameter(RequestFacade.java:381) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:75) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:197) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) ~[spring-web-4.3.14.RELEASE.jar:4.3.14.RELEASE]
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:199) ~[tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:504) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:342) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:803) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:790) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1459) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) [na:1.8.0_171]
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) [na:1.8.0_171]
    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) [tomcat-embed-core-8.5.27.jar:8.5.27]
    at java.lang.Thread.run(Unknown Source) [na:1.8.0_171]

But I have headers = "Content-Type= multipart/form-data" in my Angular and in my SpringBoot, I don't understand why I have this error.

EduBw
  • 866
  • 5
  • 20
  • 40
  • Have you got Cross Site Origins activated? Use @CrossOrigin(origins = "http://domain.try") in your controller. Or use some Chrome Extension to bypass. – Sam Jul 13 '18 at 12:36
  • yes, I have RestController--RequestMapping(value = { "/ml" }) --CrossOrigin – EduBw Jul 13 '18 at 12:40
  • Try it being specific with domain that will do the request and maxAge for cache expiration time. @CrossOrigin(origins = { "http://localhost:8080" }, maxAge = 3000). Change the port if your client is using different one. – Sam Jul 13 '18 at 12:43
  • Hi Sam I changed @CrossOrigin(maxAge = 3000) and I get the same error. – EduBw Jul 13 '18 at 12:45
  • Check your variable names for file first is "file" then is "myFile". If it is right, try to pass as @RequestParam("myFile") – Sam Jul 13 '18 at 12:52
  • I did console.log in service.ts the myFile I got ->> FormData{ ƒ append() arguments : [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (:2:14)] } – EduBw Jul 13 '18 at 12:55

1 Answers1

0

You should use @RequestParam instead of @RequestBody.

@RestController
@RequestMapping("/ml")
public class UploadController {

   @PostMapping("/insert")
   public String uploadFileForm(@RequestParam("uploadFile") MultipartFile file) {
      return file.getOriginalFilename();
   }

}
Andrei Damian-Fekete
  • 1,820
  • 21
  • 27