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

Bharathiraja · Accepted Answer · 2017-04-01 10:29:34Z

3

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

answered Apr 1, 2017 at 10:29

Bharathiraja

2,02921 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anuj Over a year ago

Can i use multiple images to upload at one hit?

Anuj Over a year ago

I still didn't get solution of this

Collectives™ on Stack Overflow

Ionic2 and Angular2 image upload example?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related