CODEWITHSUNDEEP
angularjsionic-frameworkimage-uploadingngcordovaimage-upload
user97971
user97971

Reputation: 21

how to upload image with form data with ionic angular.js

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

Upvotes: 1

Views: 3920

Answers (2)

Bharathiraja
Bharathiraja

Reputation: 2019

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.

https://ampersandacademy.com/tutorials/ionic-framework-3/upload-image-to-the-php-server-using-ionic-3-file-transfer-and-camera-plugin

Upvotes: 1

Gingerbread123321
Gingerbread123321

Reputation: 249

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.

Upvotes: 0

Related Questions