Cacher is the code snippet organizer for pro developers

<input type="file" name="" id="" #file>
<button (click)="uploadFile(file)">upload file</button>

uploadFile(file) {
    file = file.files[0];
    let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    const req = new HttpRequest("POST", "/api/file", formData, {
      reportProgress: true,
    });

    this.http.request(req).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% uploaded.`);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }

    })
  }

<system.web>
    <httpRuntime targetFramework="4.6.1" maxRequestLength="300000000" /> 
</system.web>

public class FileController : ApiController
    {
		
		public async Task<HttpResponseMessage> Post()
		{
		  if (!Request.Content.IsMimeMultipartContent())
			throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

		  var provider = new MultipartFormDataStreamProvider(HostingEnvironment.MapPath("~/App_Data"));
		  var files = await Request.Content.ReadAsMultipartAsync(provider);
		  // Do something with the files if required, like saving in the DB the paths or whatever
		  File.WriteAllBytes(files.FileData[0].LocalFileName+".png", File.ReadAllBytes(files.FileData[0].LocalFileName));
		  File.Delete(files.FileData[0].LocalFileName);
		  return Request.CreateResponse(HttpStatusCode.OK,"ok"); ;
		}
  }