javascript - How do I upload CSV file via REST API in Angular? - Stack Overflow

admin管理员组

文章数量:1289957

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 plaining that request is not multipart.

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 plaining that request is not multipart.

• javascript
• angular
• api
• csv
• file-upload

Share Improve this question Follow asked Feb 6, 2020 at 9:55 Victoria UnizhonaVictoria Unizhona 26611 gold badge22 silver badges1313 bronze badges 8

• 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 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 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 Commented Feb 6, 2020 at 10:06
• @KurtHamilton I have tried so many files - and yes, raw content. Here is an example - support.staffbase./hc/en-us/articles/… – Victoria Unizhona Commented Feb 6, 2020 at 10:09
• I downloaded one file, and they're semi-colon separated, not ma separated. This is the header: Username; Identifier;First name;Last name – Kurt Hamilton Commented Feb 6, 2020 at 10:18

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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);

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');

本文标签： javascriptHow do I upload CSV file via REST API in AngularStack Overflow