Angular : Unable to upload file on web API using HttpPostedFileBase

Question

I want to upload a file on form submit, but its not posting on web API.

And save file in a local physical path using Web API.

Here I am trying to send file using FormData and trying to access the same in api call using HttpPostedFileBase but its posting on given url(no error).

Html :

<form [formGroup]="employeeForm" (ngSubmit)="save()" #formDir="ngForm" novalidate style="position:relative;" enctype="multipart/form-data">
  <div>
 <input class="form-control" type="text" formControlName="Name">
        <input type="file" id="FileUploader" (change)="onFileChange($event)" #fileInput accept=".pdf,.doc,.docx,.png">
        <button type="button" class="btn btn-sm btn-default" (click)="clearFile()">clear file</button>
      </div>
</form>

Component :

myFiles: string[] = [];
  form: FormGroup;
  loading: boolean = false;
  @ViewChild('fileInput') fileInput: ElementRef;

onFileChange(e) {        
  for (var i = 0; i < e.target.files.length; i++) {
    this.myFiles.push(e.target.files[i]);
   } 
  }
save() {
   const frmData = new FormData();
   let fileBrowser = this.fileInput.nativeElement;
   frmData.append("myFile", fileBrowser.files[0]);

      this._employeeService.saveEmployee(this.employeeForm.value, frmData)
        .subscribe((data) => {
          this._router.navigate(['/fetch-employee']);
        }, error => this.errorMessage = error)
    }

Service :

saveEmployee(employee, myFile): Observable<any> {
   return this._http.post(this.myAppUrl + 'api/Employee/Create', { employee: employee, myFile: myFile }, {
  headers: {
    'Content-Type': undefined,
    'Accept': 'application/json'
  }
 });
 }

Web API :

  public int Create([FromBody] TblEmployee employee, HttpPostedFileBase myFile)
            {
             //code    
            }
     public partial class TblEmployee
        {
            public int EmployeeId { get; set; }
            public string Name { get; set; }              
        }

What is the response received in network tab?

Amit Chigadani
– Amit Chigadani

2018-06-27 13:21:59 +00:00
Commented Jun 27, 2018 at 13:21 — Amit Chigadani
– Amit Chigadani, Commented Jun 27, 2018 at 13:21

Amit Chigadani · Accepted Answer · 2018-06-27 13:25:27Z

1

Do not add Content-Type header. Let the browser detect the Content-Type and add by itself.

So comment out it in your code

saveEmployee(employee, myFile): Observable<any> {
   return this._http.post(this.myAppUrl + 'api/Employee/Create', { employee: employee, myFile: myFile }, {
    headers: {
    //'Content-Type': undefined,
    'Accept': 'application/json'
    }
  });
}

answered Jun 27, 2018 at 13:25

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

6 Comments

Sunil Kumar Over a year ago

Now, its returing POST localhost:35257/api/Employee/Create 500 (Internal Server Error)..

Amit Chigadani Over a year ago

What was the response returned earlier?

Sunil Kumar Over a year ago

i also tried these 2 but none of them is working for me, my api is on a different project bdw, stackoverflow.com/questions/51021454/… and stackoverflow.com/questions/51016370/…

Amit Chigadani Over a year ago

Seems like an issue with your api. Did you try testing from the postman or any other tools?

Amit Chigadani Over a year ago

One Advise : Before asking any question make sure that you research properly and let us know what is working and what is not. If you are not sure yourself, it is difficult to solve.

|

Dinh Duong · Accepted Answer · 2018-06-27 13:59:06Z

0

You should put all your data insite FormData

const frmData = new FormData();
let fileBrowser = this.fileInput.nativeElement;
frmData.append("myFile", fileBrowser.files[0]);
frmData.append("employee", employee);

And the in API you should use IFormFile

public IActionResult Create(string employee, IFormFile myFile)

Update https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.1

public class TblEmployee 
{
    // your employee info

    public IFormFile MyFile{ get; set; }
}

public async Task<IActionResult> Register(RegisterViewModel model)

edited Jun 27, 2018 at 13:59

answered Jun 27, 2018 at 13:36

Dinh Duong

2972 silver badges10 bronze badges

4 Comments

Sunil Kumar Over a year ago

how to use this IFormFile ? or it should be formcollection?

Dinh Duong Over a year ago

You can one by one append data from all properties in employee object to FormData and then send to server

Sunil Kumar Over a year ago

Failed to load resource: the server responded with a status of 415 (Unsupported Media Type)

Sunil Kumar Over a year ago

its really difficult to upload a file on angular with other form properties????????

Collectives™ on Stack Overflow

Angular : Unable to upload file on web API using HttpPostedFileBase

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related