Hi I am trying to upload image with the rest of the form data in ionic angular.js for my mobile application. I am using ngCordova plugin. But didnt find any document for this procees.
Example: I have registration form in this form has to enter his details and upload profile image. But as the example i cant send all data to the server in one request.
Thanks
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
Updated at 26-FEB-2018
For Ionic 3 , The File Transfer plugin had some changes.
To install File Transfer plugin
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer
And the classes renamed to FileTransfer from Transfer in Ionic version 3.
import { FileTransfer, FileUploadOptions, FileTransferObject }
from '@ionic-native/file-transfer';
For complete demo, visit the below link.
Try to use $cordovaFileTransfer for this. The specific implementation is described here : Upload image to server angularjs
You can either upload an image from the local storage or an image taken with the camera plugin.
