how to pass excel file to C# controller from angular 4 in Visual Studio 2017?

Question

In my web application, I have to import an excel file and want to pass the same to Server side controller.

In Server side I have used EPPlus.

How can I achieve the same?

Anyone please help to achieve the same

score 2 · Accepted Answer · answered Mar 13 '18 at 08:20

Create a file input in your template

<input type="file" #fileInput />
<button (click)="uploadFile();">Upload</button>

Then head over to your component

@ViewChild('fileInput') fileInput;
// inject httpclient from @angular/common/http
...
public uploadFile(): void {
   if (this.fileInput.files.length === 0) {
      return; // maybe needs more checking
   }

   const formData = new FormData();
   formData.append('file', this.fileInput.files[0]);
   this.http.post('http://my-url/api/my-endpoint', formData).subscibre(...); // the usual
}

Now in your API create an endpoint like that

[HttpPost]
// the name here must be file for the parameter, bc you declared it as such in your formdata
public IActionResult UploadFile([FromBody] IFormFile file)
{
    // depending on what you wanna do you can either create and store it in the filesystem or copy the file into a byte array and store it in your db
}

If you clarify where you want to save the file I can expand the C# code. But in general this is how you receive the file from the front-end, in your back-end.

score 1 · Answer 2 · answered Mar 13 '18 at 08:23

Plenty of similar questions for uploading files, or 3rd party pre-made components to use...

And plenty of similar questions and examples regarding receiving files server-side...

how to pass excel file to C# controller from angular 4 in Visual Studio 2017?

2 Answers2