StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBlackBerry 10 Cordova/PhoneGap 3.1 FileTransfer image download doesn't show on the device
text
Body
copied!<p>I'm using the <a href="https://github.com/apache/cordova-plugin-file" rel="nofollow">file</a> and <a href="https://github.com/apache/cordova-plugin-file-transfer" rel="nofollow">file-transfer</a> plugins and downloading some image files to the emulator. But when I try to use the downloaded images they don't appear. The <code><img></code> tag is empty as if the <code>src</code> attribute was wrong. </p> <p>I have noticed that the file downloaded to the phone is almost twice the size of the response sent back from the server, might that be why I can't view the images locally on the emulator? Or am I missing something else?</p> <p><a href="https://github.com/gaqzi/phonegap-bb10-file-transfer-test/blob/master/www/js/index.js#L38" rel="nofollow">Example code</a> for downloading a test image and viewing it:</p> <pre><code>requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) { var ft = new FileTransfer(), localPath = fs.root.toURL() +'/bblogo.png'; ft.download('http://developer.blackberry.com/webroot/img/common/bblogo-black.png', localPath, function(entry) { console.log('download success!'); console.log(entry); entry.file(function(file) {console.log(file.size)}); document.getElementById('test-image').src = localPath; }, function(e) { console.log('download error'); console.log(e); }) }); </code></pre> <p>In the emulator on my computer this reports back:</p> <blockquote> <p>download success!<br> Object<br> <strong>4412</strong></p> </blockquote> <p>The file in question is on my computer <strong>2818</strong> bytes.</p> <blockquote> <p>$ wget <a href="http://developer.blackberry.com/webroot/img/common/bblogo-black.png" rel="nofollow">http://developer.blackberry.com/webroot/img/common/bblogo-black.png</a><br> $ wc -c bblogo-black.png<br> 2818 bblogo-black.png</p> </blockquote> <p>I modified my local copy of the FileTransfer plugin and looked at the XHR response length and it corresponds with the size of the file. The downloaded file reported on disk for iOS is the same as the size on my computer.</p> <p>I've created a <a href="https://github.com/gaqzi/phonegap-bb10-file-transfer-test" rel="nofollow">GitHub repository</a> with my test code in case someone would like to give it a try. Note that it won't work out of the box with iOS because <code>localPath</code> is set to <code>fs.root.toURL()</code> instead of <code>fs.root.fullPath</code>.</p> <h1>Update</h1> <p>I figured that I should try and see if I can get a file uploaded that is the same size on my computer and in the emulator and then see if I can view that file. Which I failed with and I still cannot view the file on the device.</p> <p>So I Base64 encoded a 10x10 pixel pink png and then tried creating that file on the phone. And there's a slight difference in file size then as well. On my computer the file is <em>942</em> byte and reported file size on device is <em>942</em>. Testing it out on iOS it creates the file and can view it afterwards as well. But not on BlackBerry.</p> <p>Looking at other peoples examples I'm supposed to save the file to <code>blackberry.io.shared</code>, but I don't have access to the global variable blackberry at all. Looking at <a href="http://developer.blackberry.com/native/documentation/core/com.qnx.doc.native_sdk.devguide/com.qnx.doc.native_sdk.devguide/topic/accessible_folders.html" rel="nofollow">the documentation</a> I'm guessing that path should be <code>/accounts/1000/shared</code> but trying to access <code>accounts</code> with <code>fs.root.getDirectory</code> just fails with <code>accounts</code> not existing.</p> <p>Code for trying to add a base64 encoded file to the device, using <a href="https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js" rel="nofollow">Base64Binary</a>:</p> <pre><code>var imageBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDZDMEZFNTJGMkExMUUzQTA1NDgxOUY4RTYwN0MzNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDZDMEZFNjJGMkExMUUzQTA1NDgxOUY4RTYwN0MzNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFENkMwRkUzMkYyQTExRTNBMDU0ODE5RjhFNjA3QzM2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFENkMwRkU0MkYyQTExRTNBMDU0ODE5RjhFNjA3QzM2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+9WDqKgAAAAZQTFRF/wDwAAAAx8UEpAAAAA5JREFUeNpiYKAnAAgwAABuAAEcD8SQAAAAAElFTkSuQmCC'; requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) { var ft = new FileTransfer(), localPath = fs.root.toURL() +'hot-pink.png'; fs.root.getFile('hot-pink.png', {create: true}, function(entry) { entry.createWriter(function(writer) { writer.onwriteend = function(e) { console.log('writeend'); console.log(e.target); } writer.onerror = function(e) { console.log('write error'); console.log(e.target.error); } writer.write(Base64Binary.decodeArrayBuffer(imageBase64)) }, function(error) { console.log('error creating writer'); console.log(error); }) }, function(error) { console.log('error getting file'); console.log(error); }) }) requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function(fs) { console.log(fs.root.toURL()); var path = fs.root.toURL() + '/hot-pink.png'; console.log(path); resolveLocalFileSystemURI(path, function(entry) { console.log('success accessing '+ path); console.log(entry); console.log(entry.toURL()) entry.file(function(file) { console.log('success accessing file'); console.log(file.size); }, function(error) { console.log('error accessing file'); console.log(e); }) }, function(error) { console.log('error accessing '+ path); console.log(error); }) }, function(error) { console.log('error accessing filesystem'); console.log(error); }); </code></pre> <h1>Update 2</h1> <p>I noticed the code above wasn't handling Base64 correctly and it has now been corrected by adding <a href="https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js" rel="nofollow">Base64Binary</a> to the global namespace. After doing that the file added to both BlackBerry and iOS is the same size. On iOS it can display the file if I use the reported <code>toURL</code> but not on BlackBerry.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload