title: Angular 2 - How to upload file and store in local folder
body: <p>For example, I created a folder called 'upload' under src folder.</p>
  
  <p>html file:</p>
  
  <pre><code>&lt;div&gt;
     &lt;input type="file" id="photo" (change)="onChange($event)" /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6 mb-4 mt-3"&gt;
     &lt;button (click)="upload()" class="btn btn-primary w-100"&gt;Upload Picture&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>upload-modal.component.ts file</p>
  
  <pre><code>import { Http, Response } from '@angular/http';
  import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  import "rxjs/add/operator/do";
  import "rxjs/add/operator/map";
  const uploadURL = '/upload';
  
  @Component({
  
  selector: 'upload-modal',
  templateUrl: './upload-modal.component.html',
  styleUrls: ['./upload-modal.component.css']
  })
  export class UploadModalComponent {
  displayMessage: string = '';
  constructor(public activeModal: NgbActiveModal, private http: Http, private el: ElementRef) { }
  setDisplayMessage(msg: string) {
     this.displayMessage = msg;
   }
  
  upload() {
     this.activeModal.dismiss('Cross click');
   }
  
  onChange(event) {
   let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#photo');
  
  let fileCount: number = inputEl.files.length;
  
  let formData = new FormData();
  
  if (fileCount &gt; 0) { // a file was selected
  
    formData.append('photo', inputEl.files.item(0));
  
    this.http
      .post(uploadURL, formData).map((res: Response) =&gt; res.json()).subscribe(
      // map the success function and alert the response
      (success) =&gt; {
        alert("success");
      },
      (error) =&gt; alert("error"));
     }
  
    }
  }
  </code></pre>
  
  <p>when I click upload button, and I found this error in console log= <strong><a href="http://localhost:3000/upload" rel="noreferrer">http://localhost:3000/upload</a> 404 (Not Found)</strong> <br>
  I guess this must to do with routing. Anyone has experience before? </p>