cordovablackberry-webworksblackberry-10

BlackBerry 10, Camera, and FILE_NOT_FOUND_ERR


I am trying to run a phonegap app in a new BlackBerry 10 Device (Z10) and I'm running into an issue. Basically, I take a photo and I want to upload it to my server with a FileTransfer, but the FileTransfer fails with a FileTransferError.FILE_NOT_FOUND_ERR.

I then tried using the window.resolveLocalFileSystemURI method, and I now get a FileError.NOT_FOUND_ERR. I am assuming these two errors are related.

The fileURI I am passing to both of these is the fileURI that I get back from the navigator.camera.getPicture success callback and looks something like:

file:///accounts/1000/shared/camera/IMG_00000037.jpg

I've taken the example blackberry app from the phonegap 2.5.0 download and modified the index.html slightly to reproduce the issue, which I will include below:

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>

        <script type="text/javascript" charset="utf-8">

        // Called when a photo is successfully retrieved
        //
        function onPhotoURISuccess(imageURI, testFunction) {
            // Uncomment to view the image file URI 
            console.log(imageURI);

            // Get image handle
            //
            var image = document.getElementById('image');

            // Unhide image elements
            //
            image.style.display = 'block';

            // Show the captured photo
            // The inline CSS rules are used to resize the image
            //
            image.src = imageURI;

            // Run our test function
            testFunction(imageURI);
        }

        // Called if something bad happens.
        // 
        function onPhotoURIFail(message) {
            alert('Failed because: ' + message);
        }

        // A button will call this function
        //
        function getPhoto(source, testFunction) {
            // un-sandbox file system to access shared folder
            blackberry.io.sandbox = false;

            // Retrieve image file location from specified source
            navigator.camera.getPicture(
                function(imageURI) {
                    onPhotoURISuccess(imageURI, testFunction);
                },
                onPhotoURIFail,
                {
                    quality: 50,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: source,
                    correctOrientation: true,
                    saveToPhotoAlbum: true
                }
            );
        }

        // Tests whether we can resolve the imageURI returned from navigator.camera.getPicture
        //
        function testResolveLocalFileSystemURI(imageURI) {
            window.resolveLocalFileSystemURI(
                imageURI,
                function (fileEntry) {
                    var message = "Resolved local file system URI: " + imageURI;
                    document.getElementById("span").innerHTML = message;
                    console.debug(message);
                    console.debug(fileInfo);
                },
                function (error) {
                    var message = "Unable to resolve local file system URI: " + imageURI + " error: " + error.code;
                    document.getElementById("span").innerHTML = message;
                    console.error(message);
                    console.debug(error);
                    console.debug("resolve error source " + error.source);
                    console.debug("resolve error target " + error.target);
                }
            );
        }

        // Tests whether we can upload the imageURI returned from navigator.camera.getPicture using a FileTransfer
        //
        function testFileTransferUpload(imageURI) {

            // Create =the file upload options
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";

            // Create the file transfer and upload
            var ft = new FileTransfer();
            ft.upload(
                imageURI,
                encodeURI("http://some.server.com/upload.php"),
                function (r) {
                    var message = "Code: '" + r.responseCode + "'' Response: '" + r.response + "'' Sent: '" + r.bytesSent + "'";
                    document.getElementById("span").innerHTML = message;
                    console.debug(message);
                },
                function (error) {
                    var message = "Unable to upload: " + imageURI + " error: " + error.code;
                    document.getElementById("span").innerHTML = message;
                    console.error(message);
                    console.debug(error);
                    console.debug("upload error source " + error.source);
                    console.debug("upload error target " + error.target);
                },
                options
            );
        }

        // Tests whether we can upload the imageURI returned from navigator.camera.getPicture using a FileTransfer
        //
        function testFileSystemGetFile(imageURI) {
            window.requestFileSystem(
                LocalFileSystem.PERSISTENT,
                0,
                function (fileSystem) {
                    fileSystem.root.getFile(
                        imageURI,
                        {create: false},
                        function (fileEntry) {
                            var message = "Got file: " + imageURI;
                            document.getElementById("span").innerHTML = message;
                            console.debug(message);
                            console.debug(fileInfo);
                        },
                        function (error) {
                            var message = "Unable to get file: " + imageURI + " error: " + error.code;
                            document.getElementById("span").innerHTML = message;
                            console.error(message);
                            console.debug(error);
                            console.debug("get file error source " + error.source);
                            console.debug("get file error target " + error.target);
                        }
                    );
                },
                function (error) {
                    var message = "Unable to get file system. error: " + error.code;
                    document.getElementById("span").innerHTML = message;
                    console.error(message);
                    console.debug(error);
                    console.debug("file system error source " + error.source);
                    console.debug("file system error target " + error.target);
                }
            );
        }
        </script>

    </head>
    <body>
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <button onclick="getPhoto(Camera.PictureSourceType.CAMERA, testResolveLocalFileSystemURI);">Capture Photo, Test Resolve Local File System URI</button> <br>
        <button onclick="getPhoto(Camera.PictureSourceType.CAMERA, testFileTransferUpload);">Capture Photo, Test File Transfer Upload</button> <br>
        <button onclick="getPhoto(Camera.PictureSourceType.CAMERA, testFileSystemGetFile);">Capture Photo, Test File System Get File</button> <br>
        <img style="display:none;" id="image" width="100" height="100" src="" />
        <span id="span"></span>
    </body>
</html>

Whenever I run the app and try to take a photo, I get:

Unable to resolve local file system URI...

Why can't either the FileTransfer or the window.resolveLocalFileSystemURI find the file that is returned from navigator.camera.getPicture? I have the standard config.xml from the phonegap example with all of the required features and permissions (at least as far as I know)

Below is my config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<!--
  Widget Configuration Reference:
    http://docs.blackberry.com/en/developers/deliverables/15274/
-->

<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
    version="1.0.0.0" id="org.apache.cordova.example">

  <name>cordovaExample</name>

  <author>Your Name Here</author>

  <description>
       A sample Apache Cordova application that responds to the deviceready event.
  </description>

  <license href="http://opensource.org/licenses/alphabetical">
  </license>

  <!-- Cordova API -->
  <feature id="blackberry.system" required="true" version="1.0.0.0" />
  <feature id="org.apache.cordova" required="true" version="1.0.0" />
  <feature id="blackberry.find" required="true" version="1.0.0.0" />
  <feature id="blackberry.identity" required="true" version="1.0.0.0" />
  <feature id="blackberry.identity.phone" required="true" version="1.0.0.0" />
  <feature id="blackberry.pim.Address" required="true" version="1.0.0.0" />
  <feature id="blackberry.pim.Contact" required="true" version="1.0.0.0" />
  <feature id="blackberry.io.file" required="true" version="1.0.0.0" />
  <feature id="blackberry.utils" required="true" version="1.0.0.0" />
  <feature id="blackberry.io.dir" required="true" version="1.0.0.0" />
  <feature id="blackberry.app" required="true" version="1.0.0.0" />
  <feature id="blackberry.app.event" required="true" version="1.0.0.0" />
  <feature id="blackberry.system.event" required="true" version="1.0.0.0"/>
  <feature id="blackberry.widgetcache" required="true" version="1.0.0.0"/>
  <feature id="blackberry.media.camera" />
  <feature id="blackberry.ui.dialog" />
  <feature id="blackberry.connection" />
  <feature id="blackberry.bbm.platform" />
  <feature id="blackberry.invoke.card" />
  <feature id="blackberry.pim.contacts" />
  <feature id="blackberry.ui.contextmenu" />
  <feature id="blackberry.io.filetransfer" />
  <feature id="blackberry.io" />
  <feature id="blackberry.invoke" />
  <feature id="blackberry.invoked" />
  <feature id="blackberry.push" />
  <feature id="blackberry.media.microphone" required="true" version="1.0.0.0"/>

  <!-- Cordova API -->
  <access subdomains="true" uri="file:///store/home" />
  <access subdomains="true" uri="file:///SDCard" />
  <access subdomains="true" uri="file:///accounts" />

  <!-- Expose access to all URIs, including the file and http protocols -->
  <access subdomains="true" uri="*" />

  <icon rim:hover="false" src="res/icon/blackberry/icon-80.png" />
  <icon rim:hover="true" src="res/icon/blackberry/icon-80.png" />

  <rim:loadingScreen backgroundColor="#CFCFCF"
                     foregroundImage="res/screen/blackberry/screen-225.png"
             onFirstLaunch="true">
    <rim:transitionEffect type="fadeOut" />
  </rim:loadingScreen>

  <content src="index.html" />

  <rim:permissions>
    <rim:permit>use_camera</rim:permit>
    <rim:permit>read_device_identifying_information</rim:permit>
    <rim:permit>access_shared</rim:permit>
    <rim:permit>read_geolocation</rim:permit>
    <rim:permit>record_audio</rim:permit> 
    <rim:permit>access_pimdomain_contacts</rim:permit> 
  </rim:permissions>

</widget>

Below is my plugins.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<plugins>
  <plugin name="App"            value="org.apache.cordova.app.App"/>
  <plugin name="Device"         value="org.apache.cordova.device.Device"/>
  <plugin name="Camera"         value="org.apache.cordova.camera.Camera"/>
  <plugin name="NetworkStatus"  value="org.apache.cordova.network.Network"/>
  <plugin name="Notification"   value="org.apache.cordova.notification.Notification"/>
  <plugin name="Accelerometer"  value="org.apache.cordova.accelerometer.Accelerometer"/>
  <plugin name="Geolocation"    value="org.apache.cordova.geolocation.Geolocation"/>
  <plugin name="File"           value="org.apache.cordova.file.FileManager"/>
  <plugin name="FileTransfer"   value="org.apache.cordova.http.FileTransfer"/>
  <plugin name="Contacts"       value="org.apache.cordova.pim.Contact"/>
  <plugin name="Capture"        value="org.apache.cordova.capture.MediaCapture"/>
  <plugin name="Battery"        value="org.apache.cordova.battery.Battery"/>
  <plugin name="Media"          value="org.apache.cordova.media.Media"/>
  <plugin name="Globalization"  value="org.apache.cordova.globalization.Globalization"/>
</plugins>

Steps to reproduce my issue:

  1. Follow this guide (using the BlackBerry 10(QNX) steps)
  2. replace the given index.html file with the one I provided
  3. replace the given config.xml file with the one I provided (changes should be minimal)
  4. debug it on a BB10 device (I am using a Z10)
  5. click the "capture photo" button, and if you have a remote web inspector connected, you should see the errors

Solution

  • You need to do both blackberry.io.sandbox = false; and drop the file:// protocol, at least with my experience accessing files from the filesystem. Also, you should not be accessing the shared path directly. Use the blackberry.io.sharedFolder property as shown in the example on this page: https://developer.blackberry.com/html5/apis/blackberry.io.html

    Your file system path should be blackberry.io.sharedFolder + 'camera/IMG_00000037.jpg'

    The secure sandbox design of BB10 means that each application has it's own file path to the shared filesystem area.