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.
Related
I'm trying to implement a local copy of a TileJSON in an iOS app through Cordova. The issue I'm having is that OpenLayers doesn't seem to recognise the JSON file as valid and thus doesn't show any tiles. I have tried local and remote versions of the same TileJSON and looked at the Console Logs, the local one has a status of "error" (but no explanation as to what that error might be...).
I think the issue is down to the fact that the JSON file is being loaded using a file: URL, rather than http:. I have put the JSON file on a remote server and this not only loads fine but actually loads the tiles from the local path.
Can OpenLayers be tricked into accepting the local file as a valid JSON file? Can Cordova be forced to load local files via HTTP? I think either of these options would fix the issue.
Thanks
EDIT: Here's the code I'm using to load the TileJSON:
var mapLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: getPhoneGapPath() + 'tiles.json',
crossOrigin: 'anonymous'
})
});
this.map.addLayer(mapLayer);
function getPhoneGapPath() {
var path = window.location.pathname;
path = path.substr( path, path.length - 10 );
return path;
}
The getPhoneGapPath() function is used to get the path to the webroot of the Cordova app.
This is probably related to a bug in OpenLayers, https://github.com/openlayers/ol3/issues/5647. The fix will be in the next release.
Also make sure that you configure Cordova to allow access to file:// urls when the application is served from a file:// url. The equivalent option in Chrome is --allow-file-access-from-files.
I have a Cordova/PhoneGap app which uses the camera to capture a picture. I need to access this picture to send to my server.
For Android I simply use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, fileName)
However; on iOS the filename does not come back as such. My return value for iOS shows the path as
assets-library://asset/asset.JPG?id=539425FE-43AA-48E7-9865-D76348208AC7&ext=JPG
How can I access and read this image? I'd prefer to stick with $cordovaFile but just want to get it to work.
I am using CordovaCameraPreview plugin and the best I can get back from the picture taker handler seems to be something formed similar to:
assets-library://asset/asset.JPG?id=990355E1-200A-4E35-AAA1-7D461E3999C8&ext=JPG
assets-library://asset/asset.JPG?id=C49FF0EB-CCCB-45B2-8577-B13868D8DB29&ext=JPG
How can I convert this to a filename and path that I can read with $cordovaFile? According to their documentation (http://ngcordova.com/docs/plugins/file/) it looks like I need to use one of their paths for File System Layout. It works fine on Android using cordova.file.dataDirectory but can't figure out how to access on iOS
I've also tried using window.resolveLocalFileSystemURL(path) but am getting undefined as my result.
Update
I feel like I'm getting closer... using window.resolveLocalFileSystemURL(path,resolveOnSuccess, resOnError); I get more information
name: "assets-library"
fullPath: "/asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
name: "asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
nativeURL: "assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
It looks like I now need to use the fullPath but still can't figure out how to access with $cordovaFile
If I try to use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, data.name) where data.name is asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG I get a file not found error
Update 2
I have tried using every single File System Layout available at http://ngcordova.com/docs/plugins/file/ and receive the same File Not Found error on each one. Still no clue how to access a file in assets-library using $cordovaFile
I had success with a simple substitution, like this
fullPath = fullPath.replace("assets-library://", "cdvfile://localhost/assets-library/")
It works in iOS 9.3
I was struggling with a similar issue for a while, but I figured it out today. I also thought that the FileSystem APIs didn't work with assets-libary:// URIs -- but that is not the case.
You should be able to get access to the File object (as well as the actual image name) by using the following code:
resolveLocalFileSystemURL('assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG', function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(event) {
console.log(event.target.result.byteLength);
};
console.log('Reading file: ' + file.name);
reader.readAsArrayBuffer(file);
});
});
I'm attempting to use a JSON object living in a data.json file to be the dataset for a quick prototype I'm working on. This lives in a my_project/www/data/ directory. I have an Angular service that goes and grabs the data within this file using $http, does some stuff to it, and then it's used throughout my app.
I'm using Cordova and Ionic. When using ionic serve on my computer, everything looks perfect in the browser. However, when using ionic view (http://view.ionic.io/) and opening the app on my iPad, I see a:
{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}
for a response. I would think that if it were a relative URL issue, that it would also not work in the browser, but that is not the case.
Here's what I'm doing:
config.xml has this line:
<access origin="*" subdomains="true"/>
My service that preforms the simple request is doing:
return $http.get("../data/data.json").then(function (response) {
return response.data;
});
And finally, in my controller, I ask for the service to preform the request:
myService.goGetData().then(onComplete, onError);
In my browser, onComplete() is invoked and on the iPad, onError() is invoked.
Any guidance?
On your local developer machine you're actually running a webserver when you run ionic serve. So a path like ../../data.json will work because it is totally valid in the context of the webserver that has complete filesystem access.
If, however, you try to do the same thing on your device, you're probably going to run into an issue because the device has security policies in place that don't allow ajax to traverse up outside of the root. It is not a dynamic webserver so it can't load files up the tree. Instead you'd use something like the cordova file plugin to grab the file contents from the filesystem. If you prefer, you can use ngCordova to make interacting with the plugin a bit less painful.
I am 99% sure this is what is happening but you can test my theory by pointing your $http call to some dummy .json data hosted on a publicly available server to see if it works. Here is some dummy json data.
Just gonna leave this here because I had the same problem as the original question author. Simply removing any starting slashes from the json file path in the $http.get function solved this problem for me, now loading the json data works both in the browser emulator and on my android device. The root of the $http call url seems to always be the index.html folder no matter where your controller or service is located. So use a path relative from that folder and it should work. like $http.get("data/data.json")
So this is an example json file. save it as data.json
[
{
"Name" : "Sabba",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Tom",
"City" : "NY",
"Country" : "USA"
}
]
And this this is what a example controller looks like
var app = angular.module('myApp', ['ionic']);
app.controller('ExhibitionTabCtrl', ['$scope', '$http', function($scope,$http) {
$http.get("your/path/from/index/data.json")
.success(function (response)
{
$scope.names = response;
});
}]);
Then in your template make sure you are you are referencing your controller.
<ion-content class="padding" ng-controller="ExhibitionTabCtrl">
You should then be able to use the a expression to get the data
{{ names }}
Hope this helps :)
I was also looking for this and found this question, since there is no real answer to the problem I kept my search on the Internet and found this answer at the Ionic Forum from ozexpert:
var url = "";
if(ionic.Platform.isAndroid()){
url = "/android_asset/www/";
}
I've used it to load a 3D model and its textures.
update: ionic 2 beta (version date 10 Aug 2016)
You must add prefix to local url like this: prefix + 'your/local/resource'.
prefix by platform:
ios = '../www/'
android = '../www/'
browser = ''
we can create an urlResolver provider to do this job.
notice: only change url in *.ts code to access local resource, don's do this with remote url or in html code.
Have fun and good luck with beta version.
An Starter Ioner
It is possible to access local resources using $http.get.
If the json file is located in www/js/data.json. You can access using
js/data.json
Do not use ../js/data.json. Using that only works in the local browser. Use js/data.json will work on both local browser and iOS device for Cordova.
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.
After worked on many small addon i want to put those add on on my server so that people can download it and use it so that i can get the feedback from the people ..but when i am downloading it from my server(it is a xpi file) getting following error..
Firefox could not install the file at
http://abhimanyu.homeunix.com/Work/abhiman_2k5#yahoo.com.xpi
because: Install script not found
-204
but when i m putting these files manually in the path it works fine..After fiddling many hours couldn't figure it out whats the problem ...please help me.
I assume that you are letting the users download your add-on through some install button.
Unfortunately, its not as simple as pointing the browser to the xpi file on the server's file system. Below, I have pasted the script that installs Omture when the user presses on the "Download Omture" button on the add-on's website which you could also find using firebug.
function installExt()
{
var url="omture_current.xpi";
InstallTrigger.install({
"Omture": { URL: url,
toString : function() { return this.URL; } } });
return false;
}