Last active
June 29, 2021 01:02
-
-
Save coolvasanth/ab61fc337e6561be4559171b74221b1a to your computer and use it in GitHub Desktop.
pick image from gallery or from camera and upload it to server via API, ionic 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//install camera, file trnasfer plugin from ionic native and it's providers in app.component.ts. then only you can use thse codes in your .ts file. | |
presentActionSheet() { | |
let actionSheet = this.actionSheetCtrl.create({ | |
title: 'Pick your profile photo', | |
buttons: [ | |
{ | |
text: 'From Gallery', | |
handler: () => { | |
this.openGallery(); | |
} | |
}, | |
{ | |
text: 'From Camera', | |
handler: () => { | |
this.opencamera(); | |
} | |
}, | |
{ | |
text: 'Cancel', | |
role: 'cancel', | |
handler: () => { | |
console.log('Cancel clicked'); | |
} | |
} | |
] | |
}); | |
actionSheet.present(); | |
} | |
openGallery() { | |
var options = { | |
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, | |
destinationType: this.camera.DestinationType.FILE_URI | |
}; | |
this.camera.getPicture(options).then((imageData) => { | |
// imageData is either a base64 encoded string or a file URI | |
// If it's base64: | |
const fileTransfer: TransferObject = this.transfer.create(); | |
let options1: FileUploadOptions = { | |
fileKey: 'image_upload_file', | |
fileName: 'name.jpg', | |
headers: {}, | |
params: {"app_key":"Testappkey"}, | |
chunkedMode : false | |
} | |
fileTransfer.upload(imageData, 'your ApI that can take image', options1) | |
.then((data) => { | |
// success | |
alert("success"+JSON.stringify(data)); | |
}, (err) => { | |
// error | |
alert("error"+JSON.stringify(err)); | |
}); | |
}); | |
} | |
opencamera() | |
{ | |
let options = { | |
quality: 100 | |
}; | |
this.camera.getPicture(options).then((imageData) => { | |
// imageData is either a base64 encoded string or a file URI | |
// If it's base64: | |
const fileTransfer: TransferObject = this.transfer.create(); | |
let options1: FileUploadOptions = { | |
fileKey: 'image_upload_file', | |
fileName: 'name.jpg', | |
headers: {}, | |
params: {"app_key":"Testappkey"}, | |
chunkedMode : false | |
} | |
fileTransfer.upload(imageData, 'your ApI that can take imageyour ApI that can take image', options1) | |
.then((data) => { | |
// success | |
alert("success"+JSON.stringify(data)); | |
}, (err) => { | |
// error | |
alert("error"+JSON.stringify(err)); | |
}); | |
}); | |
} |
Hi, It's long ago I had created this Gist, so I'm finding difficulty in recalling why mimeType is not used. If all the things are correct but still your not able to upload the image captured from camera means, I would suggest you this repository of mine.
- Convert image captured from camera to base64 format.
- Ensure Image is converted to base64 format by logging the output of the base64 plugin.
- Upload base64 to server and convert it into Image file there. All the modern programming language has support to convert base64 into actual file.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yes sir I have already used native URL with filepath plugin but same result.
Last msg I have asked a question:-
ur not using "mimeType" in ur code.can u explain me why?