Question

I have an application that is loading html from a remote server in a UIWebView. I have built functionality that allows the iphone camera to be launched when the user clicks a button in the html document and the photo taken is saved to the Documents directory for the application. The URL for the locally saved file is then passed back to javascript and I am trying to display it in an element.

So for example, this URL could be returned to javascript:

file://localhost/var/mobile/Applications/40A88352-7F78-4085-856B-9621541774ED/Documents/tmp/photo_017.jpg

The javascript function that loads the image into the element is as follows:

function onPhotoURISuccess(imageURI) 
{
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.src = imageURI;
}

Now this seems to work fine when the html containing the element is local (ie included in the application bundle). But when the html document is loaded from an remote server, then the image does not display, it just shows a blank image.

My suspicion is that I am encountering a restriction in javascript for accessing local content. Can anyone confirm whether this is or isn’t the case? Does anyone know a work around for getting the image that has been saved to the Document folder displaying in the html document? Thanks.

Answer 1

This is a restriction of JavaScript and there are two workarounds I can think of right off the bat:

1. Get the Base64 representation of
   that image and load that (best,
   fastest)
2. Upload the image to a
   server

This page has a number of Objective-C implementations of Base64:
http://www.cocoadev.com/index.pl?BaseSixtyFour