Preview image before uploading in ionic 3

ionic-v1
1

Hi all,
I want a preview of an image before uploading to server. Currently I can upload the image to server but before that I want to preview the image. My code is like
" this.camera.getPicture({
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType: this.camera.DestinationType.FILE_URI
}).then((imageData) => {…"
if I change “destinationType: this.camera.DestinationType.DATA_URL” preview is possible but cant upload. I want both the features. What can I do? Please help me…

Thanks
Divya

2

I think this problem has to do with uploading.
I used to work with camera before, I can preview and upload normally

I use this function like this:

const options: CameraOptions = {
				quality: 35,
				destinationType: this.camera.DestinationType.DATA_URL,
				encodingType: this.camera.EncodingType.JPEG,
				mediaType: this.camera.MediaType.PICTURE,
				targetWidth:720,
				// targetHeight:1280,
			} 
			this.camera.getPicture(options).then((imageData) => { 
			this.imgUrl = 'data:image/jpeg;base64,' + imageData; 
			}
3

thank you for your response. I already tried this code , it will preview the image but upload is not working. Upload is happening only the destination type is File uri
"destinationType: this.camera.DestinationType.FILE_URI"

4

I think this problem has to do with your upload, both base64 and file uri, can upload to server the sam.

5

import the following

import { normalizeURL } from ‘ionic-angular’;

and then

let workingimagepath = normalizeURL(imageData);

Use FILE_URI

This should work to preview.