Upload image to Web Api 2 Using angular 5

This way I implement upload image 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

[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);
    }

FileUpload is super easy with angular. You can either use this description here or follow my steps.

In your component template just attach a change event to your input and let it call a function which handles the files to upload. $event.target.files includes your files.

<input type="file" (change)="upload($event.target.files)">

in your components class you need to import your files.service.ts (or what ever you called it) and provide it either in your regarding module or in the component itself if you don't want to reuse it.

import { FilesService } from 'PATHTO/files.service';
[...]
contructor(private filesService: FilesService) { }

Then you can implement the following function in your component class for a single file upload, otherwise cycle through files.item and attach it to formData

upload(files: FileList) {
  const file = files.item(0);

  this.filesService.upload(file).subscribe(
    res => /* Place your success actions here */,
    error => /* Place your error actions here */
  );
}

Make sure you have defined an url attribute in your environment or replace the post url with a static one. The files.service.ts for example can look like this

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import { environment } from 'PATHTO/environments/environment';

@Injectable()
export class FilesService {

  constructor(private http: HttpClient) { }

  upload(file: File): Observable<Object> {
    const formData: FormData = new FormData();
    formData.append('avatar', file, file.name);

    return this.http.post(`${environment.url}avatar.php`, formData);
  }
}

For example on php server side you are then able to catch those files with $_FILES variable. Don't know very much about Asp.net but I think there has to be an equivalence.

Hope this helps, have a nice day! Cheers.