typescript - 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

1. HTML

     <div class="form-group">       <label for="file">Choose File</label><br /> <input type="file" id="file" (change)="uploadFiles($event.target.files)">     </div>      <button type="button" (click)="RequestUpload()">Ok</button>  

2. ts File

public formData = new FormData(); ReqJson: any = {};  uploadFiles( file ) {         console.log( 'file', file )         for ( let i = 0; i < file.length; i++ ) {             this.formData.append( "file", file[i], file[i]['name'] );         }     }  RequestUpload() {         this.ReqJson["patientId"] = "12"         this.ReqJson["requesterName"] = "test1"         this.ReqJson["requestDate"] = "1/1/2019"         this.ReqJson["location"] = "INDIA"         this.formData.append( 'Info', JSON.stringify( this.ReqJson ) )             this.http.post( '/Request', this.formData )                 .subscribe(( ) => {                                  });          } 

3. Backend Spring(java file)

 import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths;  import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile;  @Controller public class Request {     private static String UPLOADED_FOLDER = "c://temp//";      @PostMapping("/Request")     @ResponseBody     public String uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("Info") String Info) {         System.out.println("Json is" + Info);         if (file.isEmpty()) {             return "No file attached";         }         try {             // Get the file and save it somewhere             byte[] bytes = file.getBytes();             Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());             Files.write(path, bytes);         } catch (IOException e) {             e.printStackTrace();         }         return "Succuss";     } } 

We have to create a folder "temp" in C drive, then this code will print the Json in console and save the uploaded file in the created folder

First, you need to set up HttpClient in your Angular project.

Open the src/app/app.module.ts file, import HttpClientModule and add it to the imports array of the module as follows:

import { BrowserModule } from '@angular/platform-browser';   import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module';   import { AppComponent } from './app.component';   import { HttpClientModule } from '@angular/common/http';  @NgModule({     declarations: [       AppComponent,     ],     imports: [       BrowserModule,       AppRoutingModule,       HttpClientModule     ],     providers: [],     bootstrap: [AppComponent]   })   export class AppModule { } 

Next, generate a component:

$ ng generate component home 

Next, generate an upload service:

$ ng generate service upload 

Next, open the src/app/upload.service.ts file as follows:

import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } from  '@angular/common/http';   import { map } from  'rxjs/operators';  @Injectable({     providedIn: 'root'   })   export class UploadService {      SERVER_URL: string = "https://file.io/";       constructor(private httpClient: HttpClient) { }     public upload(formData) {        return this.httpClient.post<any>(this.SERVER_URL, formData, {            reportProgress: true,            observe: 'events'         });      } } 

Next, open the src/app/home/home.component.ts file, and start by adding the following imports:

import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core'; import { HttpEventType, HttpErrorResponse } from '@angular/common/http'; import { of } from 'rxjs';   import { catchError, map } from 'rxjs/operators';   import { UploadService } from  '../upload.service'; 

Next, define the fileUpload and files variables and inject UploadService as follows:

@Component({     selector: 'app-home',     templateUrl: './home.component.html',     styleUrls: ['./home.component.css']   })   export class HomeComponent implements OnInit {     @ViewChild("fileUpload", {static: false}) fileUpload: ElementRef;files  = [];       constructor(private uploadService: UploadService) { } 

Next, define the uploadFile() method:

uploadFile(file) {       const formData = new FormData();       formData.append('file', file.data);       file.inProgress = true;       this.uploadService.upload(formData).pipe(         map(event => {           switch (event.type) {             case HttpEventType.UploadProgress:               file.progress = Math.round(event.loaded * 100 / event.total);               break;             case HttpEventType.Response:               return event;           }         }),         catchError((error: HttpErrorResponse) => {           file.inProgress = false;           return of(`${file.data.name} upload failed.`);         })).subscribe((event: any) => {           if (typeof (event) === 'object') {             console.log(event.body);           }         });     } 

Next, define the uploadFiles() method which can be used to upload multiple image files:

private uploadFiles() {       this.fileUpload.nativeElement.value = '';       this.files.forEach(file => {         this.uploadFile(file);       });   } 

Next, define the onClick() method:

onClick() {       const fileUpload = this.fileUpload.nativeElement;fileUpload.onchange = () => {       for (let index = 0; index < fileUpload.files.length; index++)       {        const file = fileUpload.files[index];        this.files.push({ data: file, inProgress: false, progress: 0});       }         this.uploadFiles();       };       fileUpload.click();   } 

Next, we need to create the HTML template of our image upload UI. Open the src/app/home/home.component.html file and add the following content:

<div [ngStyle]="{'text-align':center; 'margin-top': 100px;}">    <button mat-button color="primary" (click)="fileUpload.click()">choose file</button>      <button mat-button color="warn" (click)="onClick()">Upload</button>      <input [hidden]="true" type="file" #fileUpload id="fileUpload" name="fileUpload" multiple="multiple" accept="image/*" /> </div> 

Check out this tutorial and this post