IOnic 2 RC1: How to Upload photo from Gallery to server

have you got this Umar ? i am unable to use file transfer plug.

not tried again yet but found a link which is doing the same but i am not testing that properly

Hi Serjo,
i wanted a little help in knowing how to create a library in ionic 2. If there are any links where in i could learn how to build a library then it would be of great help.

Thanks in advance.

thanks i will try this

This is just angular2 :slight_smile: create components services etc. wraps that with ng module and import module to your app

[code]
// select photo on button click
private openGallery(): void {
Camera.getPicture({
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
destinationType: Camera.DestinationType.FILE_URI ,
targetWidth: 500,
targetHeight: 500
}).then((imageData) => {
// imageData is a base64 encoded string
// this.imageSrc = ā€œdata:image/jpeg;base64,ā€ + imageData;
this.imageSrc = imageData;

   }, (err) => {
       console.log(err);
   });

}

//after photo selection it will submit the photo in firebase
picupload() {
let filename = this.imageSrc.split(ā€™/ā€™).pop();
let options = {
fileKey: ā€œfileā€,
fileName: filename,
chunkedMode: false,
mimeType: ā€œimage/jpgā€,
params: { ā€˜titleā€™: ā€œgdā€, ā€˜descriptionā€™: ā€œyesā€ }
};

   const fileTransfer = new Transfer();

   fileTransfer.upload(this.imageSrc, 'http:..............,
       options).then((entry) => {

       }, (err) => {
           alert(JSON.stringify(err));
       });

}

[/code]ā€™

i am sending my photo to firebase storage.first selecting photo and then submitting it for firebase database.

but getting error ā€œā€˜FileTransferā€™ is undefinedā€

I suggest you read this post http://www.developerslearnit.com/2016/11/build-photo-gallery-app-with-ionic2.html

1 Like

For image upload

can you write down working code here?

I am getting upload does not exist on Transfer

you must be using ionic native 3

I want to write code according to this post api ā€¦ can you help me for thi?image

I am little confuse that where i will write upload_data ?

something like this.

  let filename = this.imagefile.split('/').pop();  //path of jpg file in device
       let options = {
           fileKey: "upload_data", 
           fileName: filename,
           chunkedMode: false,
           mimeType: "image/jpg",
           params: { 'suppplier_id': "538", 'doc_name': "pan_card" }
       };
       const fileTransfer = new Transfer();

   fileTransfer.upload(imagefile, 'http:..............,
       options).then((entry) => {

       }, (err) => {
           alert(JSON.stringify(err));
       });

oh great . it works . Thanks a lot . I have one more query that i am able to capture image and upload on server by using encodingType: this.camera.EncodingType.JPEG, but i want to upload from gallery of any type like pdf / jpeg/png/gif that 4 type so how i can do this ?

hii
i am also trying the same to capture image and upload on server
but not able to doo
can you pls share a coede

sure .this is my take picture function this.camera.getPicture({
quality : 75,
destinationType : this.camera.DestinationType.FILE_URI,
sourceType : sourceType,
allowEdit : false,
correctOrientation: true,
targetWidth: 300,
targetHeight: 300,
saveToPhotoAlbum: false,
})

and this is for upload

let filename = this.Image1.split(ā€™/ā€™).pop(); // this.image have data
let options1: FileUploadOptions = {
fileKey: ā€œupload_dataā€,
fileName: filename,
chunkedMode: false,
mimeType: ā€œmultipart/form-dataā€,
params: {ā€˜supplier_idā€™: 538, ā€˜doc_nameā€™: ā€œpan_cardā€}
};

const fileTransfer: TransferObject = this.transfer.create();
fileTransfer.upload(this.Image1,url, options1)
.then((data) => {
console.log("***** Finally image uploaded by file transfer ***");
console.log(data.response);
console.log(data);
}, (err) => {
// error
console.log(ā€œerrorā€+JSON.stringify(err));
});

thanks but can you pls say what all plugin you have used

@anuj14Preformatted text
can you pelase share the full code of .ts file
because i want to know the type of variable data type you have used
from last 1 week i m trying to slove this but geting not able to come out from this

my email id is Ravirajtiwari20@gmail.com

i did try the above code, but it didnā€™t work for meā€¦ please help me if possible