Ionic2 and Angular2 image upload example?

Question

This code is not working..

 <ion-item> <ion-label stacked>Name</ion-label> <ion-input ngControl="name" type="text" placeholder="Enter Category Name"></ion-input> </ion-item> <ion-item> <ion-label stacked>Image</ion-label> <ion-input ngControl="image" type="file" placeholder="Select Category Image"></ion-input> </ion-item> 

Is there any way to upload image file using Ion-input and get uploaded file in type script using formBuilder.?

 formBuilder.group({ name: ['', Validators.required], image: ['', Validators.required] }) 

Answer 1

To upload image to the server using Ionic 2 Framework, you have to use the Transfer plugin. Install transfer plugin using

ionic plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/transfer

Then call the upload function from Transfer class.

const fileTransfer: TransferObject = this.transfer.create();

  let options1: FileUploadOptions = {
     fileKey: 'file',
     fileName: 'name.jpg',
     headers: {}

  }

 fileTransfer.upload(imageDataLocalURL, 'http://localhost/ionic/upload.php',  options1)
.then((data) => {
 // success
 alert("success");
}, (err) => {
 // error
 alert("error"+JSON.stringify(err));
});

Use the link to know more https://ampersandacademy.com/tutorials/ionic-framework-version-2/upload-an-image-to-the-php-server-using-ionic-2-transfer-and-camera-plugin