Angular File Upload

Here is a working example for file upload to api:

Step 1: HTML Template (file-upload.component.html)

Define simple input tag of type file. Add a function to (change)-event for handling choosing files.

<div class="form-group">    <label for="file">Choose File</label>    <input type="file"           id="file"           (change)="handleFileInput($event.target.files)"></div>

Step 2: Upload Handling in TypeScript (file-upload.component.ts)

Define a default variable for selected file.

fileToUpload: File | null = null;

Create function which you use in (change)-event of your file input tag:

handleFileInput(files: FileList) {    this.fileToUpload = files.item(0);}

If you want to handle multifile selection, than you can iterate through this files array.

Now create file upload function by calling you file-upload.service:

uploadFileToActivity() {    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {      // do something, if upload success      }, error => {        console.log(error);      });  }

Step 3: File-Upload Service (file-upload.service.ts)

By uploading a file via POST-method you should use FormData, because so you can add file to http request.

postFile(fileToUpload: File): Observable<boolean> {    const endpoint = 'your-destination-url';    const formData: FormData = new FormData();    formData.append('fileKey', fileToUpload, fileToUpload.name);    return this.httpClient      .post(endpoint, formData, { headers: yourHeadersConfig })      .map(() => { return true; })      .catch((e) => this.handleError(e));}

So, This is very simple working example, which I use everyday in my work.

This way I implement upload file to web API in project.

I share for whom concern.

const formData: FormData = new FormData();formData.append('Image', image, image.name);formData.append('ComponentId', componentId);return this.http.post('/api/dashboard/UploadImage', formData);

Step by step

ASP.NET Web API

[HttpPost][Route("api/dashboard/UploadImage")]public HttpResponseMessage UploadImage() {    string imageName = null;    var httpRequest = HttpContext.Current.Request;    //Upload Image    var postedFile = httpRequest.Files["Image"];    //Create custom filename    if (postedFile != null)    {        imageName = new String(Path.GetFileNameWithoutExtension(postedFile.FileName).Take(10).ToArray()).Replace(" ", "-");        imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(postedFile.FileName);        var filePath = HttpContext.Current.Server.MapPath("~/Images/" + imageName);        postedFile.SaveAs(filePath);    }}

HTML form

<form #imageForm=ngForm (ngSubmit)="OnSubmit(Image)">    <img [src]="imageUrl" class="imgArea">    <div class="image-upload">        <label for="file-input">            <img src="upload.jpg" />        </label>        <input id="file-input" #Image type="file" (change)="handleFileInput($event.target.files)" />        <button type="submit" class="btn-large btn-submit" [disabled]="Image.value=='' || !imageForm.valid"><i                class="material-icons">save</i></button>    </div></form>

TS file to use API

OnSubmit(Image) {    this.dashboardService.uploadImage(this.componentId, this.fileToUpload).subscribe(      data => {        console.log('done');        Image.value = null;        this.imageUrl = "/assets/img/logo.png";      }    );  }

Service TS

uploadImage(componentId, image) {        const formData: FormData = new FormData();        formData.append('Image', image, image.name);        formData.append('ComponentId', componentId);        return this.http.post('/api/dashboard/UploadImage', formData);    }

Very easy and fastest method is using ng2-file-upload.

Install ng2-file-upload via npm. npm i ng2-file-upload --save

At first import module in your module.

import { FileUploadModule } from 'ng2-file-upload';Add it to [imports] under @NgModule:imports: [ ... FileUploadModule, ... ]

Markup:

<input ng2FileSelect type="file" accept=".xml" [uploader]="uploader"/>

In your commponent ts:

import { FileUploader } from 'ng2-file-upload';...uploader: FileUploader = new FileUploader({ url: "api/your_upload", removeAfterUpload: false, autoUpload: true });

It`is simplest usage of this. To know all power of this see demo