Ipad is not showing directory created with phonegap - ios

I created one directory using:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
fileSystem.root.getDirectory("Folder1", {create: true}, function (dir) {});
});
However, the directory is not displayed on my Ipad. I have tried using the file manager, but the directory is not displayed as well.
Can anyone help me solve this issue?

Related

Ionic 5 capacitor/angular preview files from external url's

I have tried previewanyfile cordova plugin to open files from external url's in Ionic 5 application. It works well with android but on IOS I noticed sometimes it doesnt preview/open PDF files. Just a grey screen with the file name on it. But strangely some PDF files open.
file preview screen
previewProductDocument(url: string) {
const loading = await this.loadingController.create({
message: 'Loading document...',
});
loading.present().then(() => {
this.previewAnyFile.preview(url).then((res) => {
loading.dismiss();
}).catch((err) => {
loading.dismiss();
this.presentToast('Error previewing the document try later', 'danger');
});
});
}
This is the plugin I have used
https://ionicframework.com/docs/native/preview-any-file
capacitor version "#capacitor/core": "^2.2.0",
Noticed this behavior only in IOS simulator + on Real IOS device.
Any idea what is going on here?
Special character (%2F) in the link is the cause of the issue.
For a quick win; either change the link or sanitise before processing.
In this case url.replace('%2F', '/') should work.
However, another link may, probably, contain a different character. Without being 100% sure, it worth a try decodeURI, which is decodeURI(url).

Yeoman copy directory not working

I am trying to copy entire directories as part of a Yeoman generator. I have multiple functions that call this.fs.copy and it works as expected (for the most part) except fonts and assetsdev. I cannot figure out why assetsdev task copies the source folder into the fonts directory rather than into the root where I have specified. Here are my three functions that wholesale copy a directory:
this.props.dotDest = './';
this.props.srcPath = './assets-dev';
this.props.destPath = './public/assets';
dotfiles: function () { // Works as expected. Copies to the root.
this.fs.copy(
this.templatePath('dot_files/.*'),
this.destinationRoot(this.props.dotDest)
);
},
fonts: function () { // Works as expected. Copies to the bootstrap directory.
var done = this.async();
this.log( chalk.magenta.bold('Copying /fonts') );
this.fs.copy(
this.templatePath('fonts'),
this.destinationRoot(this.props.destPath + '/fonts/bootstrap')
)
done();
},
assetsdev: function () { // Does NOT work. Copies to the Bootstrap directory rather than the root.
var done = this.async();
this.log( chalk.magenta.bold('Copy assets-dev') );
this.fs.copy(
this.templatePath('assets-dev'),
this.destinationRoot(this.props.srcPath)
);
done();
},
I expect the resulting folder structure to be
-assets-dev
-public
-assets
-fonts
-bootstrap
-fontfile
-fontfile
-fontfile
But instead it's generating...
-public
-assets
-fonts
-bootstrap
-assets-dev
-fontfile
-fontfile
-fontfile
...and I can't figure out why. I even tried using the async() method in case it was running asynchronously and happened to be in that directory when the assetsdev function runs.
Does anyone know why assetsdev is copying to the wrong folder? I hope I have explained clearly enough. Thank you in advance!
So apparently I cant use destinationRoot(). Instead I have to use destinationPath(). I am not sure why but using destinationPath() copies correctly now.

Proper way to implement card.io SDK with Phonegap iOS?

I want to implement the card scanner from card.io SDK into Phonegap for iOS. I'm using Phonegap v2.9.0 and had went through this https://github.com/card-io/card.io-iOS-SDK-PhoneGap
I understand that it is a plugin, but I haven't created or implemented a plugin in Phonegap before. The code provided in the above link does not work for me. I don't know why, may be I am doing something wrong in the set up steps.
I want a clarification. Below are the steps given in gitHub
1) Add CardIOPGPlugin.[h|m] to your project (Plugins group).
2) Copy CardIOPGPlugin.js to your project's www folder. (If you don't have a www folder yet, run in the Simulator and follow the instructions in the build warnings.)
3) Add e.g. to your html.
See CardIOPGPlugin.js for detailed usage information.
4) Add the following to config.xml, for PhoneGap version 3.0+:
<feature name="CardIOPGPlugin"><param name="ios-package" value="CardIOPGPlugin" /></feature>
My doubts:
Which folder are they talking about in(1)? Plugins folder in Xcode? Or the Plugins folder in Project directory (directory that has config.xml). I have tried both but the sample code does not call the onCardIOCheck.
The gitHub for card.io SDK provides initial setup steps. (https://github.com/card-io/card.io-iOS-SDK)
There, in Step 2, they say "Add the CardIO directory (containing several .h files and libCardIO.a) to your Xcode project." How do I do this? Where do I copy the folder to?
And I have also done step 3 and 4 which are
3) In your project's Build Settings, add -lc++ to Other Linker Flags.
4) Add these frameworks to your project. Weak linking for iOS versions back to 5.0 is supported. (list of frameworks..)
I have done all, my onDeviceReady works, but window.plugins.card_io.canScan(onCardIOCheck); is not calling.
Please.. anyone who has done this before in PhoneGap and iOS, please provide a detailed explanation and steps to implement this in Phonegap iOS.
Providing my code: (app id is changed for question sake)
document.addEventListener("deviceready",onDeviceReady, false);
function onDeviceReady() {
alert('device ready');
var cardIOResponseFields = [
"card_type",
"redacted_card_number",
"card_number",
"expiry_month",
"expiry_year",
"cvv",
"zip"
];
var onCardIOComplete = function(response) {
alert("card.io scan complete");
for (var i = 0, len = cardIOResponseFields.length; i < len; i++) {
var field = cardIOResponseFields[i];
console.log(field + ": " + response[field]);
}
};
var onCardIOCancel = function() {
alert("card.io scan cancelled");
};
var onCardIOCheck = function (canScan) {
alert("card.io canScan? " + canScan);
var scanBtn = document.getElementById("scanBtn");
if (!canScan) {
scanBtn.innerHTML = "Manual entry";
}
scanBtn.onclick = function (e) {
window.plugins.card_io.scan(
"MYAPPIDCHANGEDFORQUESTION",
{
"collect_expiry": true,
"collect_cvv": false,
"collect_zip": false,
"shows_first_use_alert": true,
"disable_manual_entry_buttons": false
},
onCardIOComplete,
onCardIOCancel
);
}
};
window.plugins.card_io.canScan(onCardIOCheck);
}
Which folder are they talking about in(1)? Plugins folder in Xcode? Or the Plugins folder in Project directory (directory that has config.xml). I have tried both but the sample code does not call the onCardIOCheck.
the Plugins folder is the same, Xcode project just references the folder, when you copy files (depending on how you like to organize them) you would usually select copy and hence they will be places in the plugins folder, as long as the files compiled into the project it doesn't really matter.
There, in Step 2, they say "Add the CardIO directory (containing several .h files and libCardIO.a) to your Xcode project." How do I do this? Where do I copy the folder to?
It doesn't matter where you will copy the files as long as they are included in the Xcode project and compiled.
I have done all, my onDeviceReady works, but window.plugins.card_io.canScan(onCardIOCheck); is not calling.
Make sure the CardIOPGPlugin.js is loaded before the javascript files using it, it maybe undefined and hence fails.
Hope it helps.

Is it able to test PhoneGap File API with Ripple emulator

I am working on an application with PhoneGap (now Apache Cordova, with the version of 2.0), and using the PhoneGap File API to write file.
The File API I use could be referenced at:
http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File
I use Ripple Emulator (0.9.9beta) from here: https://developer.blackberry.com/html5/download to test my application in chrome.
But I find Ripple could not handle the PhoneGap File API correctly.
For example:
I want to create a file (root/foo.json) at the PERSISTENT directory
function onSuccess(fileSystem) {
fileSystem.root.getDirectory("dir", {create: true}, function(dirEntry){
dirEntry.getFile("foo.json", {create: true}, function(fileEntry){
fileEntry.createWriter(function(writer){
writer.write(JSON.stringify(fooData));
}, onfail);
}, onfail);
}, onfail);
}
function onfail(error)
{
console.log(error.code);
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onfail);
It works fine on iOS simulator, which did create the right file at the right place, but in the Ripple Emulator running in chrome, I just got a onfail callback, and got error code 10 (FileError.QUOTA_EXCEEDED_ERR).
I also found someone with the similar question here: Is it able to test phonegap application outside emulator?
But still no answer.
Does Ripple emulator currently not work correctly for PhoneGap API? Or did I missed some setting?
Problem found. I need to grant quota before using the PERSISTENT filesystem object.
https://developers.google.com/chrome/whitepapers/storage#persistent
// Request Quota (only for File System API)
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
It seems Ripple-UI didn't do this for me (I checked the source code at lib/ripple/fs.js) . That's why I always get a FileError.QUOTA_EXCEEDED_ERR.

PhoneGap's navigator.fileMgr always undefined

I'm building iOS app with PhoneGap, need to write and read text file to the device.
I followed the steps found here: http://docs.phonegap.com/en/2.0.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS
Everything works fine, except I cannot use any of the API (I tried file and notification). I am calling:
alert(navigator.fileMgr) but it's always undefined.
I am calling that in the deviceready callback function.
I think I missed some important steps, could anyone have experience in this give me some link/guide/help?
Thanks in advance!
I'm not sure where you are getting your info but navigator.fileMgr does not exist anymore and hasn't for a long time. We've implemented the W3C File API:
http://docs.phonegap.com/en/2.0.0/cordova_file_file.md.html#File
To get the root path of the file system you would do:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
console.log("File system root = " + fileSys.root.fullPath);
}, function() {
console.log("Could not get file system");
});
Examples of how to read/write files are also available on the docs site.

Resources