Alright, here goes. I'm dealing with an ionic project. In this specific scenario we're dealing with testing the Android version of the app. I can get images from the file system just fine, they come back in the form of a string url that looks something like this,
content://com.android.providers.media.documents/document/image%3A5744
The processor that is then supposed to blob the file and pass it up the line looks like this:
return this.file.readAsArrayBuffer(urlData.url, urlData.fileName)
.then((item) => {
return new Blob([new Uint8Array(item)]);
})
.catch((err) => {
console.log(err.message)
}).then((res)=>{
return new Blob([res])
})
But then I get the error SECURITY_ERR, which the documentation doesn't really talk about.
This works just fine for the pictures I take with the camera, which all have urls that look like this
file:///storage/emulated/0/Android/data/<appname>/cache/1502211622334.jpg
The issue is, as far as i can find, there is no documentation on what causes this error. I have no idea what to change to make my code work. I have verified the URI is valid, using the checkFile method.
So it turns out you can't use content urls with file.readAsArrayBuffer instead you have to first resolve the url into something readAsArrayBuffer can understand. To do this, i used the ionic native filePath plugin.
Once it was installed and included in the page where I needed it, I used the
filePath.resolveNativePath(url)
method on my url, since this returns a promise, I chained my readAsArrayBuffer onto a then statement prepended to it. I did have to use an if statement to have branching paths for content urls (Which required resolveNativePath) and non-content urls which were already working.
This solution works as far as I can tell.
Related
For my app, I'm using the Cordova CameraPreview plugin, to take pictures.
Once, a picture is taken, I get a path like this (and a 2nd one for the thumbnail, but not more):
/data/data/com.foo.bar/files/filename.jpg
Including the picture via
<img src="/data/data/...">
it works fine, so the path seems to be valid.
However, if I try to delete pictures, it doesn't work.
My Code:
window.resolveLocalFileSystemURL(the_path, function (result) {
alert("I'm in");
result.remove(function(){
alert("removed image");
});
});
The I'm in alert doesn't appear, in my console (Android Studio) I get the following error:
java.net.MalformedURLException: No installed handlers for this URL
Do I have to modify the URL, or what's wrong?
I found a solution via trial and error.
prepending
file://
to the path, so that it looks like
file:///data/data/com.foo.bar/files/filename.jpg
worked for me. But I've no idea, if this works in iOS, too.
I am using XE7 Rad Studio to build "apps" for Android and IPhone. Focusing on Android for the moment.
According to the requirements, I need to load the HTML inside the application as a resource string.
WebBrowser1.LoadFromStrings(ResourceStrings.HTMLString,'');
//Loads the resource-string successfully.
However in this resource-string I need to load images, and I cant figure out how to do it. I can see in deployment that I have the images loaded into the project {Bitmap_1, Bitmap_2,Bitmap_3}.
How do I complete this line:
resource-string:
...'<img id="img2" class="thumbnail" src="/images/im2.bmp" alt="/images/im2.bmp"/>'...
Many thanks.
If you read the documentation for LoadFromStrings(), it says:
Displays HTML string content within the TWebBrowser component.
This method uses the following parameters:
Content: specifies the HTML string to be displayed.
BaseUrl: specifies a path that is used to resolve relative URLs within the loaded page. To clarify, consider the following scenario: this parameter is set to www.mycompany.com/departments/, and the loaded page defines a link <a href=’Sales.html’>Sales dept</a>. In the given case, clicking this link opens http:// www.mycompany.com/departments/Sales.html.
That is the exact scenario you are running into. Your HTML contains relative links to external images, but you are not providing a BaseURL, so the WebBrowser cannot resolve the correct URLs it needs to load those images.
In the Deployment Manager, set the Remote Path of your image files to either StartUp/Documents/images/ or StartUp/Library/Application Support/images/.
At app startup, Delphi will copy files beginning with StartUp to the appropriate folder on the device. Then you can do the following when calling LoadFromStrings():
// note sure which function to use for 'StartUp/Library/Application Support/',
// maybe TPath.GetLibraryPath()? This example is for '/StartUp/Documents/'...
WebBrowser1.LoadFromStrings(ResourceStrings.HTMLString, 'file://' + TPath.GetDocumentsPath);
That will allow "/images/im2.bmp" to resolve to something like file:///data/data/<application ID>/files/images/im2.bmp", etc.
I have a problem now regarding about the json that can't be read in my android..
the json file is where my data is place..it act as an static database..
I can get it with my Desktop but when it come to my mobile it didn't show..
Here is my sample code:
Here is my Services to get my json file..
var serviceUrl = '/';
$http.get(serviceUrl + 'JSON/Books.json').success(function (results) {
$scope.New = results;
});
Please help me to solve this problem.. my idea about the problem is the serviceUrl. Any idea about it. Thank you so much..
Im definitely a beginner for this Ionic Framework.
To all who still in this problem I just find something that solve it. I don't know if it will solve in your problem but it really solve in me.. I use file:///android_asset/www/ as my serviceUrl
So this is an example:
var serviceUrl = 'file:///android_asset/www/';
$http.get(serviceUrl + 'JSON/Books.json').success(function (results) {
$scope.New = results;
});
Just try it and explore to it.. i just tried that one and it worked in me..
Maybe the reason is the all the json file in your apk installer will be placed in file:///android_asset/www/json directory in android phone so let your url point to that directory..
I hope it will help you and explore in it..that might not be the correct answer but i hope it will help you find the hint.
Thank you
Starting the serviceUrl with a '/' makes it an absolute URL. It will work in chrome since the root is the www folder. But in cordova mobile environment it will translate to file:///.
Simply add a '.' ('./') to make it a relative path and it will work in both android and ios environments.
another easy way is to turn your json file into a javascript file, (for static files if you want to update use something like pouchdb).
eg save the json document as myjsondata.js
var mynamespace = mynamespace || {};
mynamespace.data = [{"foo":"bar"}];
then reference the javascript file in you main page where you load all the other js files
<script src="js/myjsondata.js"></script>
then in your service you can just access the json with mynamespave.data
Based on #Datz Me answer, I've found it's way easier if you treat your application as a web server (which it is) and request your file as being served by it instead of trying to figure out how to manage the different file paths between the several builds.
Here is what I did.
I've placed my json file on
www/json/app.json
Inside it I've put
{
"title": "Application Title",
"icon" : "custom-icon.png"
}
And in my app controller I used the following code to read the properties:
$http.get('json/app.json').success(function (results) {
$rootScope.title = results.title;
$rootScope.icon = results.icon;
});
And in all my child controllers, I just need to add $rootScope as a dependency and I'm able to use
{{title}} //on headings
{{icon}} //to display the image path
<img src="{{icon}}"/> //to display the icon
In my case, it's an app that will be customised for several clients, so I needed a way to quickly change the app's properties and keep them in one place.
so after a lot of investigation, I finally made my app able to resume state (I simply just modified the OnCreate method in the MainAcitivity.java to load a "restore" page on activity kill if there is a saved bundle instance)
I believe once I fix this final problem, all will be good and I can finally sleep.
HOW do I get the Activity/Intent result from a Camera in PhoneGap once the app has been killed off due to the Background Processes limit or the possibility of "Do not keep activities being checked" (I have a surprising amount of users who have these restrictions enabled)
I thought it might be possible to make the camera save the file in a temp directory and then I just pass the URI through javascript as a hash url (so it'd be something like file:///android_www/index-restore.html#URI_TO_IMAGE)
But my only issue is - How do I even begin this in PhoneGap? I know what to do for everthing bar the temp storage of the image and retrieving the location through onCreate
Ok finally managed it, wrote a hacky solution but it works.
I modified the CordovaInterface and CordovaActivity by adding a function called "getSharedPref" which returns a shared preference that can be accessed throughout the app.
I modified Camera Launcher to force the stored name to be temp.jpg or temp.png depending on what ever input, then store it within the preference.
On the MainActivity.java, I use this.getSharedPref() if a bundle instance is not null, and then check for the key. Unfortunately the only way I could assign the variable in Cordova was by doing
super.loadUrl("javascript: var global_image = '" + file + "'");
then I did the usual routines to add the file in my program and it all work so far! Happy days
Down the track I will probably write a plugin to use, using super.loadUrl("file:///blablabla#" + file); didn't seem to work.
The only issues so far are that Images aren't resized and rotated correctly, and I still need to implement this for the PhotoGallery but so far so good.
edit:
I've managed to get the photos resized and re-orientated :) Next issue is implementing it onto the Photo Gallery now - intent.putExtra(android.provider.MediaStore.EXTRA_OUTPUT, file); doesn't seem to apply for some reason.
edit:
Latest update - so it turns out AFTER the App has seemingly "crashed", you still get the Intent back regardless, so modifying the source code even more it now auto-calls a global javascript function called "customRestore", which passes over information gathered from the intent and then goes through the normal routine of adding a photo.
I have a WebView that I'm using to open some files stored in the assets/ directory of my project. It works fine for most of the files, but there's one in particular (and I'm sure others I haven't found) that it just will not open.
The file I'm having problems with is named:
"assets/ContentRoot/Photos/XXX Software Logo - jpg - 75%.JPG"
When I pass it to WebView, and it shows the error page, it shows it as:
"file:///android_asset/ContentRoot/Photos/XXX%20Software%20Logo%20-%20jpg%20-%2075%.JPG"
I then tried running URLEncoder.encode() on it and got the error page with the URL presented as:
"file:///android_asset/ContentRoot/Photos/XXX+Software+Logo+-+jpg+-+75%.JPG"
Neither of these URLs were able to open the file (and they both look okay to me). Anyone have any ideas?
UPDATE: If I encode the % by hand (using %25, as commonsware.com suggested) then it loads the image, but it tries to parse it as text, not as an image, so I just get a lot of (basically) garbage.
Also, referring to the image in an HTML document with a relative URL isn't working (probably because it's not being parsed as an image?):
<img src="../Photos/XXX%20Software%20Logo%20-%20jpg%20-%2075%.JPG" />
<img src="../Photos/XXX%20Software%20Logo%20-%20jpg%20-%2075%25.JPG" />
Okay, after spending way too long on this, I've figured out what's going on. Basically, if images stored in the assets/ directory contain a space (e.g., " ") in their file name, they won't render as images.
myWebView.loadUrl("file:///android_asset/testimage.jpg");
works fine. However,
myWebView.loadUrl("file:///android_asset/test+image.jpg");
just throws a not found error and
myWebView.loadUrl("file:///android_asset/test image.jpg");
// and
myWebView.loadUrl("file:///android_asset/test%20image.jpg");
show it improperly displayed (as text... see screenshot in question).
This unexpected behaviour is present on (at least) 1.5, 1.6, and 2.0 and I filed a bug report.
Try getting rid of the % in the filename. Or, escape it as %25.
I would guess that WebView only understands text related content types so it faithfully treating your JPG as base64 encoding, decodes and displays resulted gobble-goop as text. I don't really know if it's possible to set content type for WebView but as workaround you can try to throw img tag inside html tag and load resultet page. Also you probably can only use WebView#loadDataWithBaseUrl