How to upload file along with data from Angular to .NET core

Question

I have running Angular 9 application and I wanted to implement File upload behavior. In the form, user has to enter title, description and upload only one file in .zip format and while clicking on Submit, I want to send the form values along with files to Backend (using dotnet) via http post call.

file-upload.component.ts

        uploadFile(files) {
            const formData = new FormData();
            const fileToUpload = files[0] as File;
            formData.append('file', fileToUpload, fileToUpload.name);
            const data = {
               title: this.form.value.Title,
               description: this.form.value.Description,
               File: formData
            };
            console.log(data);
            this.http.post('https://localhost:5001/api/idea/add', data).subscribe((response) => {
                console.log(response);
            }});
        }

file-upload.component.html

<input type="file" #file placeholder="Choose file" (change)="uploadFile(file.files)" multiple>

FileController.cs

[HttpPost("api/idea/add")]
public async Task<IActionResult> AddIdea([FromBody] IdeaDto ideaDto) { }

Backend expects the data to come in below format

IdeaDto.cs

public class IdeaDto
{
    public IFormFile File { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

I am getting below error while submitting the data

Also, I did console.log(data) and got File value as shown in the below image. I am not sure whether this the correct data

What is wrong here? I'm really out of ideas, maybe I need a fresh thoughts on this after spending so much time

Cagri Tacyildiz · Accepted Answer · 2020-11-15 15:02:46Z

Take from form in api

[HttpPost("api/idea/add")]
public async Task<IActionResult> AddIdea([FromForm] IdeaDto ideaDto) { }

and in angular fill formdata rather than create object

uploadFile(files) {
            const formData = new FormData();
            const fileToUpload = files[0] as File;
            formData.append('file', fileToUpload, fileToUpload.name);
            formData.append('title',this.form.value.Title);
            formData.append('description',this.form.value.Description);
            console.log(data);
            this.http.post('https://localhost:5001/api/idea/add', formData ).subscribe((response) => {
                console.log(response);
            }});
        }

Saravanan · Accepted Answer · 2020-11-15 14:51:54Z

0

When you post binary data like files, they have to be posted as multi-part form data, please use the below header

Content-Type: multipart/form-data;

In the model, you should receive the data as File instead of a custom interface (IFormFile)

answered Nov 15, 2020 at 14:51

Saravanan

7,8645 gold badges44 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to upload file along with data from Angular to .NET core

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related