I want to save my images in cloudinary and retrive all the data from cloudinary?
How to i work on that and upload images with cloudinary?
How are you integrating with Cloudinary? Using a library?
I am following this tutorial
I think this will helpful.
You can create one account in Cloudinary and they given API key you can use the api key and upload and show the image. thank you. @Sujan12
From a quick look at this nothing in your app is communicating with Cloudinary directly, but all the communication is done with your own backend that then talks to Cloudinary. Is this correct?
yes .but i am not sure.
Then you have to implement the Cloudinary functionality in this backend and in your Ionic app you implement to select and upload all images to your server.
yes . When i upload a multiple images in same page .it’s showing same images only. Which image i upload first that image will appear to all other uploading areas.
This sounds like a code problem in your Ionic app. Please post some of the code (and format it using the </> button so it gets syntax highlighting etc).
i already sent one link that same code using.
or
you cant try this on github
Yeah but you have to adapt your project so you can select multiple images, right? https://github.com/developerslearnit/ionic-cloudinary/blob/master/src/pages/newpost/newpost.html only support selecting one image.
uploadPhoto() {
let loader = this.loadingCtrl.create({
content: "Please wait..."
});
loader.present();
let filename = this.imagePath.split('/').pop();
let secondfilename = this.secondimagepath.split('/').pop();
console.log(filename);
let options = {
fileKey: "file",
fileName: filename,
secondfilename:secondfilename,
chunkedMode: false,
mimeType: "image/jpg",
params: { 'title': this.postTitle, 'description': this.desc }
};
console.log(options)
const fileTransfer = new Transfer();
fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
options).then((entry) => {
this.imagePath = '';
this.panimagepath = '';
this.imageChosen = 0;
this.secondimagechoice = 0;
loader.dismiss();
//this.navCtrl.setRoot(HomePage);
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err));
loader.dismiss();
});
}
chooseImage() {
let actionSheet = this.actionSheet.create({
title: 'Choose Picture Source',
buttons: [
{
text: 'Gallery',
icon: 'albums',
handler: () => {
this.actionHandler(1);
}
},
{
text: 'Camera',
icon: 'camera',
handler: () => {
this.actionHandler(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
actionHandler(selection: any) {
var options: any;
if (selection == 1) {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
} else {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
}
Camera.getPicture(options).then((imgUrl) => {
console.log(options);
console.log(imgUrl);
var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
sourceFileName = sourceFileName.split('?').shift();
File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
this.imagePath = imgUrl;
this.secondimagepath = imgUrl;
this.imageChosen = 1;
this.secondimagechoice = 1;
this.imageNewPath = result.nativeURL;
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err))
})
}, (err) => {
console.log(JSON.stringify(err) + "Second")
alert(JSON.stringify(err))
});
}
and the html page is
<ion-card-header>
<div *ngIf="secondimagechoice == 0" class="">
<ion-icon (click)="chooseImage()" name="cloud-upload"> <span> Upload Second Image</span> </ion-icon>
</div>
<div *ngIf="secondimagechoice == 1" class="img-preview">
<img [src]="secondfilename" alt="">
</div>
</ion-card-header>
<ion-card-header>
<div *ngIf="uanimagechoice == 0" class="">
<ion-icon (click)="chooseImage()" name="cloud-upload"></ion-icon>
<span> Upload UAN </span>
</div>
<div *ngIf="imageChosen == 1" class="img-preview">
<img [src]="imagePath" alt="">
</div>
</ion-card-header>
This is my code to upload two images in s a same page. But this is not working.
Whoah, your code formatting is a mess. I reformatted it a bit to be able to understand what is going on:
uploadPhoto() {
let loader = this.loadingCtrl.create({
content: "Please wait..."
});
loader.present();
let filename = this.imagePath.split('/').pop();
let secondfilename = this.secondimagepath.split('/').pop();
console.log(filename);
let options = {
fileKey: "file",
fileName: filename,
secondfilename: secondfilename,
chunkedMode: false,
mimeType: "image/jpg",
params: {
'title': this.postTitle,
'description': this.desc
}
};
console.log(options)
const fileTransfer = new Transfer();
fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT, options).then((entry) => {
this.imagePath = '';
this.panimagepath = '';
this.imageChosen = 0;
this.secondimagechoice = 0;
loader.dismiss();
//this.navCtrl.setRoot(HomePage);
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err));
loader.dismiss();
});
}
chooseImage() {
let actionSheet = this.actionSheet.create({
title: 'Choose Picture Source',
buttons: [{
text: 'Gallery',
icon: 'albums',
handler: () => {
this.actionHandler(1);
}
},
{
text: 'Camera',
icon: 'camera',
handler: () => {
this.actionHandler(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
actionHandler(selection: any) {
var options: any;
if (selection == 1) {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
}
else {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
}
Camera.getPicture(options).then((imgUrl) => {
console.log(options);
console.log(imgUrl);
var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
sourceFileName = sourceFileName.split('?').shift();
File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
this.imagePath = imgUrl;
this.secondimagepath = imgUrl;
this.imageChosen = 1;
this.secondimagechoice = 1;
this.imageNewPath = result.nativeURL;
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err))
})
}, (err) => {
console.log(JSON.stringify(err) + "Second")
alert(JSON.stringify(err))
});
}
}
<ion-card-header>
<div *ngIf="secondimagechoice == 0" class="">
<ion-icon (click)="chooseImage()" name="cloud-upload">
<span> Upload Second Image</span>
</ion-icon>
</div>
<div *ngIf="secondimagechoice == 1" class="img-preview">
<img [src]="secondfilename" alt="">
</div>
</ion-card-header>
<ion-card-header>
<div *ngIf="uanimagechoice == 0" class="">
<ion-icon (click)="chooseImage()" name="cloud-upload"></ion-icon>
<span> Upload UAN </span>
</div>
<div *ngIf="imageChosen == 1" class="img-preview">
<img [src]="imagePath" alt="">
</div>
</ion-card-header>
Looking at the html:
- Why is the naming of the variables different for the both cards? Make it “imagechoice1” and “imagechoice2” etc. Both card should be basically identical but for numbers that differentiate them.
- Both “Buttons” use
chooseImage()as a click handler - how should this method know which one of these buttons was clicked and then decide where to “put” the image? You need at least a parameter for that call here.
I will try this one and update it.
I changed the function name also getting same error. I changed the chooseImage() name and tried that one … same error i found. If i selected one image to printed other upload areas.
Of course, right now the chooseImage() doesn’t know anything about what to do. Please post your updated code after changing the variable names and cleaning up the code formatting. I will keep trying to help.
uploadPhoto() {
let loader = this.loadingCtrl.create({
content: "Please wait..."
});
loader.present();
let secondImage = this.secondImagepath.split('/').pop();
let filename = this.imagePath.split('/').pop();
let options = {
fileKey: "file",
fileName: filename,
secondImage:secondImage,
chunkedMode: false,
mimeType: "image/jpg",
params: { 'title': this.postTitle, 'description': this.desc }
};
const fileTransfer = new Transfer();
fileTransfer.upload(this.imageNewPath, AppSettings.API_UPLOAD_ENDPOINT,
options).then((entry) => {
this.imagePath = '';
this.secondImagepath = '';
this.imageChosen = 0;
this.secondImageChoice = 0;
loader.dismiss();
this.navCtrl.setRoot(HomePage);
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err));
loader.dismiss();
});
}
chooseImage() {
let actionSheet = this.actionSheet.create({
title: 'Choose Picture Source',
buttons: [
{
text: 'Gallery',
icon: 'albums',
handler: () => {
this.actionHandler(1);
}
},
{
text: 'Camera',
icon: 'camera',
handler: () => {
this.actionHandler(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
chooseImages1() {
let actionSheet = this.actionSheet.create({
title: 'Choose Picture Source',
buttons: [
{
text: 'Gallery',
icon: 'albums',
handler: () => {
this.actionHandler(1);
}
},
{
text: 'Camera',
icon: 'camera',
handler: () => {
this.actionHandler(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
//}
actionHandler(selection: any) {
var options: any;
if (selection == 1) {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
} else {
options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
}
Camera.getPicture(options).then((imgUrl) => {
console.log(options);
console.log(imgUrl);
var sourceDirectory = imgUrl.substring(0, imgUrl.lastIndexOf('/') + 1);
var sourceFileName = imgUrl.substring(imgUrl.lastIndexOf('/') + 1, imgUrl.length);
sourceFileName = sourceFileName.split('?').shift();
File.copyFile(sourceDirectory, sourceFileName, cordova.file.externalApplicationStorageDirectory, sourceFileName).then((result: any) => {
this.imagePath = imgUrl;
this.secondImagepath = imgUrl;
this.imageChosen = 1;
this.secondImageChoice = 1;
this.imageNewPath = result.nativeURL;
}, (err) => {
alert(JSON.stringify(err));
console.log(JSON.stringify(err))
})
}, (err) => {
console.log(JSON.stringify(err) + "Second")
alert(JSON.stringify(err))
});
}
Html
<ion-card-header>
<div *ngIf="imageChosen == 0" class="">
<ion-icon (click)="chooseImage()" name="cloud-upload"></ion-icon>
</div>
<div *ngIf="imageChosen == 1" class="img-preview">
<img [src]="imagePath" alt="">
</div>
</ion-card-header>
<ion-card-header>
<div *ngIf="secondImageChoice == 0" class="">
<ion-icon (click)="chooseImages1()" name="cloud-upload"></ion-icon>
</div>
<div *ngIf="secondImageChoice == 1" class="img-preview">
<img [src]="secondImagepath" alt="">
</div>
</ion-card-header>
updated code
You did stuff, but none of what I said. Please reread my post and adapt.
I think problem is here …when call the function this two will execute same time. i will change and update.