How to send Angular 6 object with image File to web-api?

Question

I want to post Image File with other form details as one object as below

export interface Employee {
    id: Guid;
    firstName: string;
    lastName: string;
    email: string;
    imgFile: File;
    enteredDate: Date;
}

This is my service

  addEmployee(employee: Employee) {
    return this.http.post(this.baseUrl + 'employees/add', employee);
  }

Is it possible to send a File as above ? If possible How to retrieve that file in asp.net core web api ?

  [HttpPost("add")]
  public void Add(EmployeeAddDto employeeAddDto)
  {
   ....// save employeeAddDto object to database
  }

in EmployeeAddDto what should be the file of imgFile ?

You can do that by using FormData check this post-formdata — Muhammad Shareyar
– Muhammad Shareyar, Commented Apr 30, 2019 at 13:40
if your web-api only accept json then you not able to send image file as form data or image as json for this you have few options like user web-api with json or formdata type or you can first convert image into base64 and then send by json once you get base64 string sever side decode back to image from base64 then i will work — harkesh kumar
– harkesh kumar, Commented May 1, 2019 at 6:57

Edward · Accepted Answer · 2019-05-01 06:35:46Z

For uploading file, you need to use formdata at client side and FromFormat server side.

Client View

<input id="imgFile" type="file" (change)="addFile($event)" placeholder="Upload file">

Client JS

public addFile(element) {
        let data = new FormData();
    data.append('firstName', 'f1');
    data.append('lastName', 'l1');
    data.append('imgFile', element.target.files[0]);
    this.http.post<any>(this.baseUrl + 'api/SampleData/add', data).subscribe(result => {

        });
}

Server API

[HttpPost("add")]
public void Add([FromForm]EmployeeAddDto employeeAddDto)
{
}

Model

public class EmployeeAddDto
{
    public string Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public IFormFile ImgFile { get; set; }
    public DateTime EnteredDate { get; set; }
}

PuntanetDeveloper · Accepted Answer · 2019-04-30 14:05:00Z

0

I think you are using dotnet as a backend

    [HttpPost]
    [Route("api/values/Post")]       
    public HttpResponseMessage Post()
    {      

        foreach (var file in Request.Form.Files)
        {
            StreamReader sr = new StreamReader(file.OpenReadStream());
            \\
            \\your code
            \\
        }
    }

in angular use FormData for send image

edited Apr 30, 2019 at 14:05

answered Apr 30, 2019 at 13:52

PuntanetDeveloper

3183 silver badges17 bronze badges

Comments

Shyam Agarwal · Accepted Answer · 2021-09-02 05:16:56Z

0

Basically you can use Form Data to send both you data Object/Model and the file. The simple trick to do so is just stringify your object. Here is an example

let formDatavar = new FormData(); formDatavar.append("File",fileDetails,FileName) formDatavar.append("ModelData",JSON.stringify(ModelDataFromUI))

Then you can use the formDatavar to send your data

At last you need to convert your string to object in your backend service

answered Sep 2, 2021 at 5:16

Shyam Agarwal

1

Collectives™ on Stack Overflow

How to send Angular 6 object with image File to web-api?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related