title: How to upload image and save using Angular2 and Typescript
body: <p>i have a image upload section where i need to upload an image. But when i save i get an error saying <code>generic</code>. can anyone help me to solve this.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;label &gt;Image&lt;/label&gt;
  &lt;div &gt;
  &lt;input type="file" name="file" id="file" class="inputfile" (change)="readUrlAdd($event)" style="display:none;"/&gt; &lt;label for="file" &gt;Add Image&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ts:</p>
  
  <pre><code>readUrlAdd(event: any) {
      var files = event.srcElement.files;
      var filename = new Date().getTime() + '.' + files[0].name.split(".")[1];
      var imgFile = new File([files[0]], filename, { type: files[0].type });
      var file_data = imgFile;
      this.ApiService
        .uploadImage(file_data)
        .subscribe(
          image =&gt; {
            console.log(image);
            var fileName = image.result.files.file[0].providerResponse.location;
            console.log(fileName);
            this.tutorials = fileName;
          }, error =&gt; {
            console.log(error);
          })
    }
  </code></pre>
  
  <p>API:</p>
  
  <pre><code>uploadImage (files) {
    let token = JSON.parse(localStorage.getItem('token'));
    var fd = new FormData();
    fd.append('file', files);
    return this.http.post(urlBase + '/tutorials/tutorial?token=' + token,fd)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  </code></pre>