Upload image in div element

Ionic Framework ionic-v3
1

Hello friends when i try to upload a image in a div element from the camera image is uploading but it is not displaying in the div element…ie…, an empty background is displaying… i need help from you guys to find this error…I am using cordova-plugin-camera to get camera and library images from the phone

my html code is

 <div text-center class="photo-grid">  
   <img src="{{pathForImage(lastImage)}}" style="width:100%;display:block;" [hidden]="lastImage === null"/>    
    <h3 [hidden]="lastImage !== null">Please Select an Image!</h3> 
 </div>

and my .ts file code is

var options = {    quality: 100, 
   sourceType: sourceType,   
 saveToPhotoAlbum: false,
    correctOrientation: true  
};

this.camera.getPicture(options).then((imagePath) => {   
 // Special handling for Android library   
 if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {    
    this.filePath.resolveNativePath(imagePath)       
      .then(filePath => { 
         let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1); 
         let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1,imagePath.length,imagePath.lastIndexOf('?').shift());          this.copyFileToLocalDir(correctPath, currentName, this.createFileName());        });        } else {      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);     
         this.copyFileToLocalDir(correctPath, currentName, this.createFileName()); 
   }
  }, (err) => {  
  this.presentToast('Error while selecting image.'); 
 });
}

private copyFileToLocalDir(namePath, currentName, newFileName) { 
 this.file.copyFile(namePath, currentName, this.file.externalApplicationStorageDirectory, newFileName).then(success => {  
  this.lastImage = newFileName;  
  this.pathForImage(this.lastImage);
  }, error => {  
  this.presentToast('Error while storing file.');  
});
}
public pathForImage(img) { 
 if (img === null) { 
   return '';  
} else {    
    return this.file.externalApplicationStorageDirectory + img; 
   }
}
2

no one there to help me.:frowning:

3

Where are you uploading what?
Don’t you just want to select a picture from camera roll and then display it in a div?

4

i just want to upload a image from camera roll and want to display in div element…thats all…yeah exactly you saying…:slight_smile:

5

Yeah, not uploading…

Post your ionic info please.
Where are you testing this?

Where does it break?
Did you see how far your code is working?

6

mm…yeah image upload from gallery is not working…but image uploading from the camera is working but the image is not displaying in the div element…

here my ionic info

global packages:
@ionic/cli-utils : 1.4.0
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.7
@ionic/cli-plugin-ionic-angular : 1.3.1
Ionic Framework : ionic-angular 3.4.2
System:
Node : v8.0.0
OS : Linux 4.6

i am testing this in my physical device…

Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 5.0.3
7

now i am reduced my errors…but i have a run time error

Cannot read property ‘file’ of undefined

i tried …

constructor(public file:File){}

function inside(){
    this.platform.ready().then( success=>{  
     var options = {                 
    destinationType:this.camera.DestinationType.FILE_URI,                         
    sourceType:this.camera.PictureSourceType.PHOTOLIBRARY,     
    allowEdit: true,    
    encodingType:this.camera.EncodingType.JPEG,       
     targetWidth: 1024,     
      targetHeight: 768,      
     saveToPhotoAlbum: false,              
        correctOrientation: true               
  };                                 
this.camera.getPicture(options).then(function (sourcePath) {             
     var sourceDirectory = sourcePath.substring(0, sourcePath.lastIndexOf('/') + 1);     
             var sourceFileName = sourcePath.substring(sourcePath.lastIndexOf('/') + 1, sourcePath.length);                 
        sourceFileName = sourceFileName.split('?')[0];     
             this.file.copyFile(sourceDirectory, sourceFileName,this.file.dataDirectory, sourceFileName).then(function (success) {          
          this.uploadedImage = this.file.dataDirectory + sourceFileName;   
               }, function (error) {      
                 alert("error uncountered");      
            });
   });
}