I been working with fileTransfer from Ionic native, it working fine on Android, but on iOS not not do anything at all
Here is my code:
getFile(fileName,url){
let fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(url, this.file.dataDirectory + fileName).then((entry) => {
console.log('entry:',entry)
}, (error) => { console.log(error); });
console.log('file transfer',fileTransfer.onProgress)
var a = fileTransfer.onProgress((progressEvent: ProgressEvent) => {
this.ngzone.run(() => {
console.log(progressEvent.loaded)
});
});
}
it depends on how to derive this.file.dataDirectory.
In my case it always works like this ..
declare var cordova:any; //on top of file
if (this.platform.is('android')) {
this.fsurl = cordova.file.dataDirectory;
}else{
this.fsurl = cordova.file.documentsDirectory;
}
Related
I am working in Vue Js with Laravel. But specifically in iPhone Chrome my dispatch method is not working after dispatching. Please if anyone finds this type of issue in iPhone devices. Please provide any relevant solution.
Here the API Call code.
ProviderProfileService.addAddress(this.$apiUrl, this.address).then(
(response) => {
let result = response.data.createServiceLocation;
if (result.status == "success") {
let steps_status = JSON.parse(
result.service_location.user.providerProfileItems.profile_steps_status
);
if (steps_status.addrestime == true) {
alert(1);
this.$store
.dispatch("update_provider_profile_status", {
providerProfileStatus: steps_status,
})
.then((res) => {
alert(2);
this.$store.dispatch("update_progress_bar").then((res1) => {
if (response.data.createServiceLocation.status == "error") {
alert(0);
self.updateAddress();
} else {
this.$router.push(
"/provider-profile/language/" + this.userConfig.unique_identifier
);
alert(3);
// this.$router.push({
// name: "Language",
// params: { id: this.userConfig.unique_identifier },
// });
alert(4);
// window.location.href =
// "https://19b0-2404-3100-1c81-8081-e0bc-c658-121c-836b.ngrok.io/provider-profile/language/" +
// this.userConfig.unique_identifier;
this.scrollToTop();
alert(5);
}
});
});
}
}
},
(error) => {
self.content =
(error.response && error.response.data) || error.message || error.toString();
}
);
Here is the dispatch method code.
state.providerProfileStatus.basicinfo = (payload.basicinfo)?true:false;
state.providerProfileStatus.rates = (payload.rates)?true:false;
state.providerProfileStatus.services = (payload.services)?true:false;
state.providerProfileStatus.addrestime = (payload.addrestime)?true:false;
state.providerProfileStatus.availability = (payload.availability)?true:false;
state.providerProfileStatus.integrations = (payload.integrations)?true:false;
state.providerProfileStatus.certifications = (payload.certifications)?true:false;
state.providerProfileStatus.payment_settings = (payload.payment_settings)?true:false;
state.providerProfileStatus.documents_and_vaccination = (payload.documents_and_vaccination)?true:false;
state.providerProfileStatus.language_and_introduction = (payload.language_and_introduction)?true:false;
I'm try to download file in ionic5 using this code
downloadImages() {
let photo_name = this.util.getPhotoName(this.contacts.rows.item(this.counter).person_fullname);
let url = encodeURI(this.imagePathUrl + photo_name + "?r=" + Math.round(Math.random() * 999999));
let local_path = this.util.getLocalPath();
let fileUrl = local_path + this.paramPro.getPhotoFileName() + "/" + photo_name;
this.fileTransfer.download(url, fileUrl).then(entry => {
console.log('download : ', entry);
if (this.counter == this.contacts.rows.length-1) {
this.loading.dismiss().catch(() => {});
this.presentDownloadFinishAlert(this.paramPro.getMessage('title'), this.paramPro.getMessage('download_complete'));
} else {
this.counter++;
this.downloadImages();
}
}).catch(e => {
if (this.counter == this.contacts.rows.length-1) {
this.loading.dismiss().catch(() => {});
this.presentDownloadFinishAlert(this.paramPro.getMessage('title'), this.paramPro.getMessage('download_complete'));
} else {
this.counter++;
this.downloadImages();
}
});
}
and i got console.log
file:///data/user/0/io.ionic.starter/files/photo_mg/%E0%B8%99%E0%B8%B2%E0%B8%A2%E0%B8%9B%E0%B8%B4%E0%B8%A2%E0%B8%81%E0%B8%A3%20%E0%B8%AD%E0%B8%A0%E0%B8%B4%E0%B8%9A%E0%B8%B2%E0%B8%A5%E0%B8%A8%E0%B8%A3%E0%B8%B5.png
it is same issue as Location of the file downloaded on android using ionic
i also put this code in config.xml
<preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,root" />
and put this code in AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
it still doesn't work where was file:///data/user/0/io.ionic.starter/files in my phone ? I find it with windows explorer find files, and i not found it.
finally, found the answer. ionic cordova need to use Ionic.webView.convertFileSrc to
convert file
from file:///path/to/device/file
to http://host:port/prefix/path/to/device/file <--- to display in html
see doc https://ionicframework.com/docs/core-concepts/webview#file-protocol
you can't browse files directly in your phone ?? (not sure)
this.fileTransfer.download(url, fileUrl).then(entry => {
let win: any = window;
this.safeURL = win.Ionic.WebView.convertFileSrc(entry.toURL());
});
Not especially for your need but I can provide a larger solution. I create a cache service for Ionic and it includes file saving and checking
private win: any = window;
public async checkFile(fileUrl) {
let stringURL = String(fileUrl);
let fileName = stringURL.split('//')[1].replace(/\//g, '-');
let directory;
if (this.platform.is("desktop")) {
return fileUrl;
}
if (this.platform.is("android")) {
directory = this.file.dataDirectory;
}
if (this.platform.is("ios")) {
directory = this.file.dataDirectory;
}
return this.file.checkFile(directory, fileName)
.then(
async result => {
if (result) {
return this.win.Ionic.WebView.convertFileSrc(directory + fileName);
} else {
return fileUrl;
}
}
)
.catch(
async err => {
//FileError.NOT_FOUND_ERR
if (err.code == 1) {
let fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.download(fileUrl, directory + fileName, true)
.then(
result => {
}
)
.catch(
error => {
console.error(error);
throw error;
}
)
}
return fileUrl;
}
)
}
If you log directory in checkFile function or result in catch part of the function you will see where the file is
You can check project and code from here : https://gitlab.com/demarkelabs/sanalmarketuygulamam/ionic-app/-/blob/master/src/app/cache.service.ts
I am trying to upload an image to Firebase Storage, however, ref.putfile() leads to the error in the tittle
I didn't find any appropriate resource related to this error
This is where I get image from user:
openPicker = () => {
// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
title: 'Fotoğraf Seç',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
const source = { uri: response.uri}
this.setState({
imageMessageSrc: source
});
this.uploadImage();
}
});
}
Then I try to uploadImage to firebase
uploadImage = () => {
console.log("Here");
const filename = this.randIDGenerator// Generate unique name
firebase
.storage()
.ref(`${firebase.auth().currentUser.uid}/sentPictures/${filename}`)
.putFile(this.state.imageMessageSrc)
.then(() => {
console.log("Here1");
})
.catch((error) => {
console.log(error);
})
When I delete putFile, error is gone, but obviously nothing happens to database.
Problem is related to the difference between filePath and fileUri. So, the solution is as below:
openPicker = () => {
const options = {
title: 'Fotoğraf Seç',
storageOptions: {
skipBackup: true,
path: 'images',
allowsEditing: true,
},
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ',response.customButton);
}
else {
var path = '';
if (Platform.OS == 'ios')
path = response.uri.toString();
else {
path = response.path.toString();
}
const image= {
image: response.uri.toString(),
path: path
};
this.uploadImage(image);
}
});
}
uploadImage = (image) => {
firebase.storage().ref(uploadUrl).putFile(image.path);
}
I realized that Firebase Storage putFile function doesn't work with image uri, instead it should be supplied with filePath. I used uri of this image to directly show image on the screen even before upload.
My facebook native ads integration code is like below.
var that = this;
this.platform.ready().then(() => {
if(FacebookAds)
{
//FacebookAds.setOptions({
//isTesting: true,
//deviceHash: 'fe645f07-9801-41fe-a430-xxxxxxxxxxx'
//},(s)=>(console.log("settings are OK.")),(e)=>(console.log("Settings are not loaded...")));
FacebookAds.createNativeAd('xxxxxxxxx',
(eee) => {
document.addEventListener("onAdLoaded", (data) =>{
console.log(data);
let temp: any = data;
if(temp.adType == "native")
{
this.startFB = 1;
document.getElementById('adIcon').setAttribute("src", decodeURIComponent(temp.adRes.icon.url));
document.getElementById('adCover').setAttribute("src", decodeURIComponent(temp.adRes.coverImage.url));
document.getElementById('adTitle').innerHTML = temp.adRes.title;
document.getElementById('adBody').innerHTML = temp.adRes.body;
document.getElementById('adSocialContext').innerHTML = temp.adRes.socialContext;
document.getElementById('adBtn').innerHTML = temp.adRes.buttonText;
that.updateXY(0, 0);
}
});
document.addEventListener('onAdFailLoad', (data) => {
console.log(data);
//alert('error: ' + data);
});
},
(err) => console.log(err)
);
}
});
When I run this code without test mode, I get 1001 error code.
When I run this code with test mode, No error but load data comes empty.
Not: I test code in real device and I login as test user to Facebook app in this device.
Do you have any advice?
as a code template doing it like this,
.controller('PushNotificationsCtrl', function ($scope, $cordovaPush) {
var androidConfig = {
"senderID":"372433177444",
"ecb":"onNotification"
};
$cordovaPush.register(androidConfig).then(function(result) {
// Success!
$scope.pushSuccess = result
}, function(err) {
$scope.pushSuccess = err;
});
I manage to successfully get an RegID from GCM. But then how do I manage onNotification from androidConfig ?
i found the solution.
instead of doing this :
var androidConfig = {
"senderID":"372433177444",
"ecb":"onNotification"
};
I do like this :
var androidConfig = {
"senderID":"372433177444",
"ecb":"window.onNotification"
};
then
window.onNotification = function(e) {
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
console.log("Your regID is : " + e.regid);
}
break;
case 'message':
// this is the actual push notification. its format depends on the data model from the push server
console.log('message = '+e.message);
angular.element(document.querySelector('#yata')).html(e.message);
break;
case 'error':
console.log('GCM error = '+e.msg);
break;
default:
console.log('An unknown GCM event has occurred');
break;
}
};
all work as expected now :)
Change the following code to ng-cordova.js:
//config.ecb = 'angular.element(' + injector + ').injector().get(\'$cordovaPush\').onNotification';
config.ecb = "angular.element(" + injector + ").injector().get('$cordovaPush').onNotification";
and then set the options configuration object as follows:
var options = {
android: {
senderID: "789175757493",
ecb:"onNotification",
forceShow: true
},
}
It will display notifications in notification drawer when application is opened.