title: Save FormData with File Upload in Angular 5
body: <p>I am trying to save files along with FormData in Angular 5.
  I can get the single file, but have no idea how to get all the files uploaded.
  I have three image files and input fields, tried searching examples. But only got for multiple file uploads.
  I want to upload each and every single file from this form.</p>
  
  <p>Below is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  import { Location } from '@angular/common';
  import { ActivatedRoute } from '@angular/router';
  import { Category } from '../../../shared/services/categories/category';
  import { CategoriesService } from '../../../shared/services/categories/categories.service';
  
  @Component({
    selector: 'app-add-category',
    templateUrl: './add-category.component.html',
    styleUrls: ['./add-category.component.scss'],
    encapsulation: ViewEncapsulation.None
  })
  export class AddCategoryComponent implements OnInit {
    
    category: Category = new Category();
    fileToUpload: File = null;
    
    constructor(
      private categoriesService: CategoriesService,
      private route: ActivatedRoute,
      private location: Location  
    ) { }
  
    ngOnInit() {
    }
  
    goBack(): void {
      this.location.back();
    }
  
    handleFileInput(files: FileList) {
      console.log(files);
    }
  
    addCategory() {
      console.log(this.category);
      this.categoriesService.createCategory(this.category).subscribe(() =&gt; this.goBack());
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>          &lt;h3 class="box-title"&gt;Category&lt;/h3&gt;
  
          &lt;form role="form" (ngSubmit)="addCategory()" #categoryForm="ngForm"&gt;
  
                &lt;div class="box-body"&gt;
  
                  &lt;div class="row"&gt;
                    &lt;div class="col-lg-6"&gt;
                    &lt;label for="Category Name"&gt;Name&lt;/label&gt;
                    &lt;input type="text" class="form-control" [(ngModel)]="category.category_name" name="category_name" id="category_name" placeholder="Enter Category Name" required=""&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-lg-6"&gt;
                    &lt;label for="Category Path"&gt;Path&lt;/label&gt;
                    &lt;input type="text" class="form-control" [(ngModel)]="category.category_path" name="category_path" id="category_path" required=""&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;br/&gt;
  
              &lt;div class="form-group"&gt;
                    &lt;label for="Category Description"&gt;Description&lt;/label&gt;
                    &lt;textarea rows="3" [(ngModel)]="category.category_description" name="category_description" id="category_description" class="form-control" required=""&gt;&lt;/textarea&gt;
              &lt;/div&gt;
                  
              &lt;div class="col-lg-12 text-center"&gt;
                  &lt;input type="file" [(ngModel)]="category.category_banner" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_banner" id="category_banner"&gt;
                  &lt;label class="custom-file-label" for="customFile"&gt;Banner&lt;/label&gt;
              &lt;/div&gt;
              &lt;br/&gt;
  
              &lt;div class="form-group"&gt;
                &lt;label for="Category Banner Code"&gt;Banner Code&lt;/label&gt;
                &lt;textarea rows="3" [(ngModel)]="category.category_banner_code" name="category_banner_code" id="category_banner_code" class="form-control" required=""&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              
              &lt;br/&gt;
              
              &lt;div class="col-lg-12"&gt;
                  &lt;input type="file" [(ngModel)]="category.category_image" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_image" id="category_image"&gt;
                  &lt;label class="custom-file-label" for="customFile"&gt;Image&lt;/label&gt;
              &lt;/div&gt;
          
              &lt;br/&gt;
  
              &lt;div class="col-lg-12"&gt;
                  &lt;input type="file" [(ngModel)]="category.category_icon" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_icon" id="category_icon"&gt;
                  &lt;label class="custom-file-label" for="customFile"&gt;Icon&lt;/label&gt;
              &lt;/div&gt;
  
                &lt;div class="form-group"&gt;
                &lt;label for="Category Meta Title"&gt;Meta Title&lt;/label&gt;
                &lt;input type="text" [(ngModel)]="category.category_meta_title" class="form-control" name="category_meta_title" id="category_meta_title" placeholder="Enter Meta Title" required=""&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                &lt;label for="Category Meta Description"&gt;Meta Description&lt;/label&gt;
                &lt;input type="text" [(ngModel)]="category.category_meta_decription" class="form-control" id="category_meta_description" name="category_meta_description" placeholder="Enter Meta Description" required=""&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                &lt;label for="Category Meta Keyword"&gt;Meta Keyword&lt;/label&gt;
                &lt;input type="text" [(ngModel)]="category.category_meta_keyword" class="form-control" id="category_meta_keyword" name="category_meta_keyword" placeholder="Enter Meta Keyword" required=""&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
               
                &lt;div class="row"&gt;
                   &lt;div class="col"&gt;Featured :&lt;/div&gt;
                  &lt;div class="col"&gt;
                  &lt;label class="radio-inline" for="Category Featured"&gt;
                    &lt;input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="1" required=""&gt;Yes
                  &lt;/label&gt;
                &lt;/div&gt;
  
                &lt;div class="col"&gt;
                  &lt;label class="radio-inline" for="Category Featured"&gt;
                    &lt;input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="0" required=""&gt;No
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
                
              &lt;input type="hidden" [(ngModel)]="category.category_status" name="category_status" id="category_status" value="1"&gt;
  
                &lt;div class="box-footer col-md-12"&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>