How to upload image and save using Angular2 and Typescript

Question

i have a image upload section where i need to upload an image. But when i save i get an error saying generic . can anyone help me to solve this.

HTML:

<label >Image</label>
<div >
<input type="file" name="file" id="file" class="inputfile" (change)="readUrlAdd($event)" style="display:none;"/> <label for="file" >Add Image</label>
</div>

Ts:

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 => {
          console.log(image);
          var fileName = image.result.files.file[0].providerResponse.location;
          console.log(fileName);
          this.tutorials = fileName;
        }, error => {
          console.log(error);
        })
  }

API:

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);
}

Answer 1

you need to use file uploader for uploading file. for installation use following command. found demo

npm i ng2-file-upload --save

Answer 2

event.srcElement will not work in all browsers, please try the below

const files = event.target.files || event.srcElement.files;
const imgFile = files[0];

Answer 3

You should pass headers with request

let headers = new Headers();
headers.append('token', token); // Try to pass token in header
let options = new RequestOptions({ headers: headers });  

return this.http.post(urlBase + '/tutorials/tutorial,fd, options)
              .map((res: Response) => res.json() || {})
              .catch(this.handleError);