How do I upload CSV file via REST API in Angular?

Question

In my html I have:

 name="file" type="file"
 accept=".csv"

In ts: I get file - $event.target.files.item(0);

Then I pass it to the service

  uploadCSVFile( file) {
    const uploadedFile = new FormData();
    uploadedFile.append( 'file', file, file.name);
    const url = `MyURL`;
    return this.http.post(url, uploadedFile);
  }

The problem is that it says File must have a contentType text/csv But when I add headers -

{headers:  new HttpHeaders().append('Content-Type', 'text/csv')}

It is complaining that request is not multipart.

Before you explicitly set the headers, is it the server asking for "text/csv", or the Angular http client? I was doing some csv upload stuff this morning and didn't have to set headers on my request, and what you have looks good. My point is, maybe the server method is expecting something different? — Kurt Hamilton
– Kurt Hamilton, Commented Feb 6, 2020 at 10:01
@KurtHamilton It is the response I receive from the server - File must have a contentType text/csv. Request headers have: Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryh0fSoB1keNQolXCW And when I look on the FormData Sent it has: Content-Type: application/octet-stream — Victoria Unizhona
– Victoria Unizhona, Commented Feb 6, 2020 at 10:04
Silly question, but it is an actual csv file, not an Excel file with a .csv extension? I assume you see the raw csv content when you open the file in a text editor? — Kurt Hamilton
– Kurt Hamilton, Commented Feb 6, 2020 at 10:06
@KurtHamilton I have tried so many files - and yes, raw content. Here is an example - support.staffbase.com/hc/en-us/articles/… — Victoria Unizhona
– Victoria Unizhona, Commented Feb 6, 2020 at 10:09
I downloaded one file, and they're semi-colon separated, not comma separated. This is the header: Username; Identifier;First name;Last name — Kurt Hamilton
– Kurt Hamilton, Commented Feb 6, 2020 at 10:18

Victoria Unizhona · Accepted Answer · 2020-02-06 13:33:26Z

10

The issue was related to MIME types mismatch. The files MIME type is not recognized as same across platforms. .csv file in OSX is recognized as text/csv, whereas in Windows it is recognized as application/vnd.ms-excel.

Here is the solution - change line:

 uploadedFile.append( 'file', new Blob([file], { type: 'text/csv' }), file.name);

answered Feb 6, 2020 at 13:33

Victoria Unizhona

2661 gold badge2 silver badges13 bronze badges

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

Comments

Zulqarnain Jalil · Accepted Answer · 2020-02-06 10:53:42Z

0

you need to make your content type as multipart you can modify your code as given below

uploadCSVFile( file) {
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** In Angular 5, including the header Content-Type can invalidate your request */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        return this.http.post(url, formData, options)
}

another way is to use

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

answered Feb 6, 2020 at 10:53

Zulqarnain Jalil

1,69117 silver badges27 bronze badges

Collectives™ on Stack Overflow

How do I upload CSV file via REST API in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related