am building an app that gets new data from a server - xml and images, and saves that to the sdcard. I then use either the xml from within the app or the one on the sdcard, downloaded from the server. This works fine... the trouble is the xml references images - and ones that were installed with the app work fine.
I need to be able to use the new images, that were downloaded though.
Right now I have the images like so in the xml:
<listImage>images/breakfast/thumb_zucchiniBread.jpg</listImage>
That for images installed with the app. When I get the new xml, and want to use images on the sdcard how can I do this? I've tried using the path the images are downloaded to like so:
<detailImage>data/data/com.gmr.humana/gallery_oats.jpg</detailImage>
But it doesn't work. Have tried Android/data etc...
This needs to work on iOS also, but hoping to just get Android working first.
Get file/image from system local file storage
function getFileSystem{
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function fail() {
console.log("failed to get filesystem");
}
function gotFS(fileSystem) {
console.log("got filesystem");
console.log(fileSystem.root.fullPath);
window.rootFS = fileSystem.root;
}
Related
My application downloads a set of images and stores them in the internal storage by creating a folder.
The problem is the images are being shown in the gallery. This should not happen, is there a way to programatically hide the images but still be usable by the app?
Thanks in advance.
EDIT:
This is only happening to the android version of the app. In the iOS it is not showing in the Camera Roll.
This depends where you download the images: If you download them on your Pictures folder or inside of a public folder from sdcard/internal memory then MediaScanner scan them so your pictures will be visible in the Gallery app.
To avoid this you can try one of the following solutions:
Add a .nomedia file inside your destination folder
OR
Download your pictures in app cache directory by using LocalFileSystem.TEMPORARY.
Something like
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function(fs) {
fs.root.getDirectory("media", {create: true}, function(fileDirectoryEntry) {
// var destFile = fileDirectory + "/" + filename;
// downloadPicture(srcUrl, destFile);
});
});
The downside of this solution is that when the app is removed, your pictures are deleted as well.
I am developing an application in phonegap that is supposed to work in both ios and android.
For this application i need to download all images from the server.I was able to download the images to the external memory card using the following code.
function storeIntelligrapeLogo() {
alert('start of file download');
var url = "http://www.kannuronlineservices.com/images/logo.png"; // image url
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
alert('inside request file sysytem')
var imagePath = 'file:///storage/sdcard0'+fs.root.fullPath + "/logo.png"; // full file path
alert('inside request file sysytem path fs.root==' + fs.root);
alert('inside request file sysytem path fs.root.fullPath==' + fs.root.fullPath);
var fileTransfer = new FileTransfer();
fileTransfer.download(url, imagePath, function(entry) {
alert(entry.fullPath); // entry is fileEntry object
}, function(error) {
alert("Some error" + JSON.stringify(error));
});
}) }
Now i would like this to work in ios also.For that what is the file path i have to use
for 'file:///storage/sdcard0'.Then now the file is downloaded to the external memory card in android and i would like it to be downloaded to the application installation folder and so that when the application is uninstalled,the images also get deleted.Or please suggest me if there exist some other way of doing this,ie:downloading images from server folder and storing it locally with phonegap so that the application is expected to work in offline mode also.
Thanks.
You can use a phonegap plugin.
Look at http://plugins.cordova.io/#/package/de.fastr.phonegap.plugins.downloader
It downloads multiple files to persistant storage on android and ios.
I am able to download an image if I specify the path directly with
file:///storage/sdcard0/
How can I save an image to my one of the folders in my app ? I tried this approach to set app path but it doesn't work for me.
This is what I am using so far and it works if you want to save and image to sdcard:
var fileName = "myImage.png";
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://my.url.to.image/myImage.png");
var filePath = "file:///storage/sdcard0/uploads/myImage.png";
fileTransfer.download(
uri,
filePath,
function(entry) {
alert("download complete: " + entry.fullPath);
console.log("download complete: " + entry.fullPath);
},
function(error) {
alert("download error source/target/code:\n" + error.source +" \n||| "+error.target+" \n||| "+error.code);
console.log("download error source/target/code " + error.source+" / "+error.target+" / "+error.code);
}
);
If I use this function:
function getPhoneGapPath() {
'use strict';
var path = window.location.pathname;
var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
return phoneGapPath;
}
I get /android_asset/www/. How would I get the correct path to my app?
The app is using AngularJS and is not bootstrapped in onDeviceReady (developer before me made it that way and now changing it to something like this is beyond me (tried but didn't work)).
Another question I can refer to was asked here.
I also tried this, this, this and this but none worked for me. I get "" for fullPath and recently I managed to get path printed with .toURL() and it was "cdvfile://localhost/persistent". The above download code now also works if I use
filePath = "cdvfile://localhost/persistent/MyAppID/uploads/myImage.png";
but this creates folder /MyAppID/uploads in /storage/sdcard0 which is bad again. My app needs to get to images with
<img src="uploads/myImage.png" alt="myimg"/>
Another useful link is here but it offers no help as to how to write to pre-created folder of your own app.
EDIT: As far as I've learned you cannot write within your own app(read only). That's why I tried to reference images from sdcard with
<img src="file:///storage/sdcard0/Android/data/com.app.my/cache/myImage.png" alt="myimg"/>
and this works! :) Unfortunately this is hardcoded and not good since other phones might have a different persistent location.
If I try
<img src="cdvfile://localhost/persistent/Android/data/com.app.my/cache/myImage.png" alt="myimg"/>
this does not reference the picture :/ (it does download it on storage/sdcard0/Android/data/com.app.my/cache/ though)
I would use the folder alias as defined in the plugin docs here (https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md). Specifically cordova.file.dataDirectory. Note that this is not, afaik, under the www of your original project, but it seems to be the preferred place to store downloads. Once saved there you can resolve that to a URL that you could use to load via AJAX, or in an img tag if you are downloading graphics.
As far as I learned you cannot write to your own app (change items inside your app - /www folder on Android).
My solution was to save images to PERSISTENT storage (sdcard usually).
You can get the path of your app's persistent storage with these steps:
function onDeviceReady() {
console.log('Device Platform: ' + device.platform); // returns 'Android' or 'iOS' for instance
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
cacheFolderSubPath = "Android/data/com.id.myApp/cache/"; // this is app's cache folder that is removed when you delete your app! (I don't know what this path should be for iOS devices)
}
Then inside gotFS success callback
function gotFS(fileSystem) {
var nturl = fileSystem.root.toNativeURL(); // cdvfile://localhost/persistent/
window.resolveLocalFileSystemURL(nturl+cacheFolderSubPath, onResolveSuccess, onResolveFail);
}
and in onResolveSuccess
function onResolveSuccess(fileEntry){
appCachePath = fileEntry.toNativeURL()+"/"; // file:///storage/sdcard0/Android/data/com.id.myApp/cache/ in my case but some other Androids have storage/emulated/0 or something like that ...
continueCustomExecution();
}
and now in continueCustomExecution() you can run your program and do whatever it is you do ... and in this case download images into appCachePath that we got earlier. You can now successfully reference images in src tags with our appCachePath+yourImageName.
Unfortunately I still don't know how to download an image successfully on iOS. I get an error code 1 with FileTransfer plugin ... (saving to file:///var/mobile/Applications/my.app.id/Documents/). Probably should save somewhere else but this is the path I get when requesting PERSISTENT FileSystem.
Cheers
I used the code below to get the path to download, but once formatted and installed the mac version 3.3.0rc1 of the cordova, the code does not work as it should.
function onSuccess(fileSystem) {
console.log(fileSystem.root.fullPath);
}
// request the persistent file system
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
Before, the code returning something like:
/Users/myuser/Library/Application Support/iPhone Simulator/5.0/Applications/CF2A9018-49B9-4DE6-91FC-EA76CB435FC8/Document
Now, the code returns only:
"/"
And I can not download that way
Any change in the cordova? What code should I use to download?
I've tried several but did not succeed.
Thanks to all.
I have created a Worklight application and added to it the Android environment. This application has a button to take a photo using the device camera, and an img tag in the HTML which displays the captured photo.
I followed this PhoneGap Camera API.
Now I am trying to store that image into the SD Card but fail doing so. my
EDIT: I changed my code as below:
function takeimage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(getImageURI, function(message) {
alert('Image Capture Failed');
}, {
quality : 40,
destinationType : Camera.DestinationType.FILE_URI
});
}
function getImageURI(imageURI) {
var gotFileEntry = function(fileEntry) {
var img=document.getElementById("thisImage");
img.style.visiblity="visible";
img.style.display="block";
img.src=imageURI;
alert("got image file entry: " + fileEntry.fullPath);
var gotFileSystem = function(fileSystem){
// copy the file
fileEntry.moveTo(fileSystem.root, "pic.jpg", null, null);
};
// get file system to copy or move image file to
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem, fsFail);
};
//resolve file system for image
window.resolveLocalFileSystemURI(imageURI, gotFileEntry, fsFail);
}
//file system fail
function fsFail(error) {
alert("failed with error code: " + error.code);
}
Everything working fine(capturing image and image available in app cache folder) except moveTo method.
fileEntry.moveTo(fileSystem.root, "pic.jpg", null, null);
I put fileSystem.root in alert and I am getting Object object. So the folder location is not available to move that image(And I think its the real problem).
This, in fact, has got nothing to do with Worklight.
Since you are already using Apache Cordova to access the device's camera to snap a photo, you should also use it to store the image file to the device's SD Card.
Here are a couple of SO questions to point you to the right solution for you:
How to move captured image in PhoneGap to a folder in sdcard
Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS
Note #1: your link to the PhoneGap Camera API points to v1.0.
Worklight 5.0.6.x uses PhoneGap 2.3.0, so be sure to use the correct API version.
Note #2: make sure you have added permission to write to the SD Card by adding the below line to the android.manifest file:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Note #3: in case #2 above is not enough, try getting the SD Card location like this:
File sdDir = Environment.getExternalStorageDirectory();
use this option in your takePicture callback
{
saveToPhotoAlbum: true
};
Also use all other option too as per your requirement. This will save your image to photolibrary.
saveToPhotoAlbum: Save the image to the photo album on the device after capture. (Boolean)
It will save your image to sd card without writing any extra code.