FormData upload in angular4 application

Question

In my angular4 application I'm trying to upload the video to server. But no matter what i add to the content type it always results in error from the server. In angular 1 the same api is hit using { 'Content-Type': undefined }

i tried the same in angular but it dint work. The data and everything is correct. I have tried with content-type set as below

headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', token);
headers.set('Accept', 'application/json');

and also as below

headers.append('Content-Type', undefined);

below is the http request method:

public uploadVideo(formData: any) {


        var Upload = this.baseUrl + this.ngAuth.getApiUrl('Upload');
        var authData = JSON.parse(this.localStorage.localStorageGet('token'));
        var token = 'Bearer ' + authData.token;
        var self = this;

        var headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Authorization', token);
        headers.set('Accept', 'application/json');

        return this.http.post(Upload , formData, { headers: headers, method: 'POST' })
            .map((res: Response) => res.json());

    }

Please guide! Thanks

Shruti Nair · Accepted Answer · 2017-10-27 11:10:10Z

23

So after going through a lot of solution i stumbled upon this issue

It says do not add the Content-Type to the header. So from my request header i removed

headers.append('Content-Type', 'multipart/form-data');

Thanks!

answered Oct 27, 2017 at 11:10

Shruti Nair

2,0449 gold badges32 silver badges60 bronze badges

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

1 Comment

hughjdavey Over a year ago

Thanks for this. For others I can add that if you already have the Content-Type header being set by Angular (my issue), you can do headers: myHeaders.delete('Content-Type')

Philip · Accepted Answer · 2019-01-03 16:27:21Z

4

I'll give a reference with Angular 6 and Spring Boot.

Angular 6 :

onSubmit(){
const formdata: FormData = new FormData();
console.log(this.currentFileUpload)
formdata.append('uploadedFile', this.currentFileUpload);
formdata.append('description',"My Desc");
formdata.append('companyName',"ABC")
formdata.append('numberOfRecords',"2")
console.log(formdata.get('uploadedFile'))

this.asyncService.makeUploadRequest('file/upload',formdata).subscribe(response => {
  console.log(response)
  if(response.responseCode == '00'){
    console.log('Successfully uploaded')
  }
  else {
    console.log("error")
  }
 });
}


makeUploadRequest(method, body) : Observable<any> {
    const url = "http://localhost:8097" + "/" + method;

    const headers = new Headers();
    this.token="Bearer"+" "+localStorage.getItem('token'); 
    headers.append('Authorization', this.token);
    // No need to set 'content type'
    const options = new RequestOptions({headers: headers});
    return this.http.post(url, body, options).pipe(
        map((response : Response) => {
            var json = response.json();                
         return json; 
        })
    );
}

Spring Boot API :

@RestController
@RequestMapping(value = { "/file" })
public class FileController {

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public Response uploadFile(@RequestParam("uploadedFile") MultipartFile uploadedFileRef){
        System.out.println(uploadedFileRef);
    }
}

edited Jan 3, 2019 at 16:27

Philip

24.4k2 gold badges33 silver badges31 bronze badges

answered Aug 17, 2018 at 12:58

Shahbaaz Khan

1773 silver badges6 bronze badges

2 Comments

Pizzicato Over a year ago

What Content-Type is Angular 6 setting for you? In my case it's application/json and I don't think that's right...

Shahbaaz Khan Over a year ago

The content-type in my case is multipart/form-data when not specified in header : Content-Type: multipart/form-data; boundary=----WebKitFormBoundarytKcUBulaQJNwYb6P

Collectives™ on Stack Overflow

FormData upload in angular4 application

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related