Sending file in angular2

Question

I need to send file via POST in my web application. I have a server side in java and a client side in angular 2. I need to client send file to the server. Server's code:

@RequestMapping(method = RequestMethod.POST, value = "/run/file")
@ResponseBody
private void runImportRecordsJob(@RequestParam("file") MultipartFile file){
    // Some code
}

Client's code:

Component:

export class ImportRecordsJobComponent implements OnInit {

  file: File;


  constructor(private jobsService: JobsService) { }


  chooseFile(event: any){
    this.file = event.srcElement.files[0];

    console.log(this.file);
  }

  selectFormat(event: any){
    if (event.length > 0)
      this.format = event[0].key;
    else
      this.format = null;

  }

  runImportRecordsJob(){
    if (confirm("Are you sure you want to run this job?")){
      this.jobsService.runImportRecordsJob({file: this.file});
    }
  }

  ngOnInit() {
  }

}

Service:

@Injectable()
export class JobsService {

  constructor(private http: Http) { }

  runImportRecordsJob(importRecords: any){
    var headers = new Headers({"Content-Type": 'application/json; multipart/form-data;'});
    let options = new RequestOptions({ headers: headers });

    let formData = new FormData();
    formData.append("file", importRecords.file, importRecords.file.name);

    this.http.post(SERVER + "/batches/run/file", formData, options).subscribe();
  }

}

But I'm getting an error: nested exception is org.springframework.web.multipart.MultipartException: The current request is not a multipart request

and formData is always empty. Can anyone suggest me a way how to send file without using ng2-uploader and stuff like that. Thanks.

Sergey Panov · Accepted Answer · 2016-12-06 13:27:38Z

1

Did you miss the "CommonsMultipartResolver" bean?

<bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 20 * 1024 * 1024 Byte = 20 MB-->
        <property name="maxUploadSize" value="20971520" />
        <property name="defaultEncoding" value="UTF-8" />
    </bean>

Edit:

Changed method on the service:

  runImportRecordsJob(importRecords: any){
    let options = new RequestOptions();

    let formData = new FormData();
    formData.append("file", importRecords.file, importRecords.file.name);

    console.log(formData);
    console.log(importRecords);
    this.http.post(SERVER + "/batches/run/file", formData, options).subscribe();
  }

edited Dec 6, 2016 at 13:27

Sergey Panov

3331 gold badge5 silver badges16 bronze badges

answered Dec 6, 2016 at 13:15

Chao Luo

2,7061 gold badge20 silver badges31 bronze badges

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

3 Comments

Sergey Panov Over a year ago

No, I've configured the bean:

@Bean 	public CommonsMultipartResolver multipartResolver(){ 		CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(); 		commonsMultipartResolver.setDefaultEncoding("utf-8"); 		commonsMultipartResolver.setMaxUploadSize(50000000); 		return commonsMultipartResolver; 	}

Chao Luo Over a year ago

var headers = new Headers({"Content-Type": 'application/json; multipart/form-data;'});

Chao Luo Over a year ago

Can you remove the application header?

Collectives™ on Stack Overflow

Sending file in angular2

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related