0

I have an ng-repeat that, among other thing, outputs on image:

<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index">
...
    <img ng-src="{{installation.logo}}" />
...
</div>

When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:

<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products="">
...
     <img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png">
...
</div>

(dots used to hide person and client data)

If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.

--- EDIT ---

I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.

I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.

--- EDIT ---

I set it as file:///C:/... and I'm having the same issue.

I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.

dcp3450
  • 10,959
  • 23
  • 58
  • 110
  • 1
    Is the app hosted in a webserver, where-as when you say local it's just opened via file:// ? If so that's why -- – Matt Sep 23 '15 at 19:34
  • Sorry, I failed to mention it's a Cordova app using ngCordova and AngularJS. So the app as well as the files are local to the machine and are not web based. – dcp3450 Sep 23 '15 at 19:37

3 Answers3

1

You can do this in two different ways: 1) Use the file protocol 2) use a local host server to store the picture and access it from the local host

for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.

method 1: just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol. NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.

method 2: start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so: http://localhost/my_images/image_name use this path for your ng-src.

Olarewaju Doyin
  • 98
  • 6
  • Thanks for all this. I'll try method 1. This app will always be local to the users machine and isn't open to the public. I use wamp/mamp a lot in my own work but the client won't even begin to grasp that (lol). – dcp3450 Sep 23 '15 at 19:46
  • I set it as `file:///C:/...` and I'm having the same issue. – dcp3450 Sep 23 '15 at 20:12
  • I also tried `file:///C:/...` , `http://localhost/...`, `http://localhost:/...`, `http://localhost:C/...`, `C:/...`, and `file:///...`. No of witch give me anything. The first two `localhost` items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it. – dcp3450 Sep 23 '15 at 23:00
0

oh, a Cordova app.. why don't you place the file in an images folder In your project. since all files will be loaded using index.html (I assume). you can easily refer to the file relative to the location of index.html. how I would normally organize my project is that, my index.html and folders containing resources like js, CSS etc would be on thesame level, so I can easily get the image files using ng-src="img/image_name". so I could have a structure like this index.HTML img ..image_name.ext ..image2.ext css ..style.css test it in a browser location if it works, it will work on the device. Cordova would know how to translate d into something it can recognise.

This is some sample code, i quickly put together. I tested it and it worked. Firstly i create a directory using file plugin and then download to this directory using file transfer. Replace the url parameter of file transfer with the url you wish to download from.

    $ionicPlatform.ready(function() {

            $cordovaFile.createDir(cordova.file.externalDataDirectory, 
                file_location,false).then(
                  function(success){

                    return success;
                },function(error){

                    return error;
                }).then(function(value){

                    var url = material.file_uri;
                    var targetPath = cordova.file.externalDataDirectory 
                            + "/" +file_location + "/" + file_name;
                    var trustHosts = true
                    var options = {};

                    $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
                      .then(function(result) {
                        console.log(result)
                      }, function(err) {
                        console.log(err)
                      }, function (progress) {
                        $timeout(function () {

                          console.log(Math.floor((progress.loaded / progress.total) * 100));

                        })
                      });               

            })

        })
Olarewaju Doyin
  • 98
  • 6
  • The files are being downloaded and stored to the device. The writable directory is being supplied via the cordova file structure using `cordova-plugin-file` – dcp3450 Sep 24 '15 at 15:08
  • Right now the app is "static" and everything is being pulled in that way. However, now I have to make it dynamic and pull content from the net via an API I wrote. – dcp3450 Sep 24 '15 at 15:18
  • Are you making use of ng-cordova's file plugin? They provide a directory structure on there page which you can make use of. if you have been successful In downloading the files dynamically, you would have supplied a download location to the plugin, you can make use of this location. The file transfer and file plugins both make use of a promise, you can just use this promise to discover when it has been downloaded and use the same directory when loading the image. Also make sure you are storing in the external directory, i think it should be Cordova.file.externalDirectory or so. if you are s – Olarewaju Doyin Sep 25 '15 at 11:02
  • What plugin are you using? NgCordova or Cordova's native plugin? If I have an idea of the plugin, I will provide you with working code – Olarewaju Doyin Sep 25 '15 at 11:13
  • I'm suing ngCordova to download the files `$cordovaFileTransfer.download(...)`. Once the download completes I store the path to file. The download location is taken from `window.requestFileSystem(...,function(fs){...});`. I'm not using `cordova.file` to get the location since it was returning undefined. My database is generated at the same location and the app reads the content from the database as expected. – dcp3450 Sep 25 '15 at 16:05
  • That's the problem, Cordova filetransfer works better with Cordova file. You will see Cordova file is a required to use Cordova filetransfer. I've been able to successfully use both Cordova file and filetransfer without issues on two different projects. It might give undefined if you didn't check for platform ready event. If you are developing with ionic its easily achieved. Please paste the code that returns undefined. Or just paste the code for both download and file transfer. – Olarewaju Doyin Sep 25 '15 at 18:44
  • The values for file are part of the `cordova` object. When I `console.log` it's not listed so calling something like `cordova.file.dataDirectory` I get a js error that it can't get `dataDirectory` of undefined as `cordova.file` is undefined. I have it running in device ready with everything else that requires it. – dcp3450 Sep 25 '15 at 19:21
  • I have both file and fileTransfer installed. the `$cordovaFile` meathods are available just not `cordova.file`. – dcp3450 Sep 25 '15 at 19:22
  • `fs.root.nativeURL` exists as `ms-appdata:///local/`. I think I need to be using that. I know that the `$cordovaFile` methods are available. I'll see if I can get what I need that way. – dcp3450 Sep 25 '15 at 19:38
  • Please paste your code on the implementation of Cordova file. I've used both successfully on more than two projects and they are both working fine – Olarewaju Doyin Sep 26 '15 at 18:52
  • I just edited my previous post and included some code. Check it out – Olarewaju Doyin Sep 27 '15 at 20:18
0

Because I Cordova File and Windows weren't playing nice using the call for cordova.file.dataDirectory didn't work. Instead I used the fs object returned by window.requestFileSystem(...,function(fs){...});

When generating my save to path as well as the path to create directories and location data I used fs.winpath which returned C:/.... The web (which Cordova basically is) won't allow you to have access to local files not associated with the site/apps structure, which is now obvious.

I dug in to the fs object and found fs.root.nativeURL points to ms-appdata:///local/. Switching everything over to this still downloaded all files and directories to the same location but stored that to the database as the file location. When the app loaded the ms-appdata path instead of the C:/ path the images displayed.

dcp3450
  • 10,959
  • 23
  • 58
  • 110