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

[vks_gautam1]

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

[UmarRasheed]

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

Build A Photo Gallery app with Ionic2, Cloudinary, NodeJs And MongoDB part 1

[pavan2]

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.

[vks_gautam1]

thanks i will try this

[serjo]

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

[vks_gautam1]

[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”

[mark2k]

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

[bharathiraja]

For image upload

Upload an image to the PHP server using Ionic 2 Transfer and Camera plugin

[anuj14]

can you write down working code here?

[anuj14]

@vks_gautam1

fileTransfer.upload

I am getting upload does not exist on Transfer

[vks_gautam1]

you must be using ionic native 3

[vks_gautam1]

Ionic Framework

[anuj14]

I want to write code according to this post api … can you help me for thi?

I am little confuse that where i will write upload_data ?

[vks_gautam1]

@vks_gautam1

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

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

[anuj14]

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 ?

[Ravirajtiwari]

@vks_gautam1

let optio

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

[anuj14]

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

[Ravirajtiwari]

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

[Ravirajtiwari]

@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

[abrseqato]

i did try the above code, but it didn’t work for me… please help me if possible