Failing on Facebook Audience network images.

[antonfire]

There seems to be an issue when dealing with URLs such as below:

"https://external.xx.fbcdn.net/safe_image.php?d=AQA-rLFlQ98NknCQ&w=796&h=416&url=https%3A%2F%2Fwww.facebook.com%2Fads%2Fimage%2F%3Fd%3DAQLCHHtYr0sSkmvoZGDU8jB8yNMwUOG_3XP9z5tSnNf6XJb4uGFyRbiXJPbsFx449vfVRVN770XTlFVd6du6N3300s5LRrcOy7tkuc-4WW-uNRKv5JLeCw9yKL30blatPZXN8n-EU_7hWDwSf3b9MFwA&cfs=1&ext=jpg"

Is this something to do with URI encoding?

Thanks

[antonfire]

Ok I figured this out for anyone experiencing similar issues. Cordova file transfer encodes URLs by default, unless the option for this behaviour is set to false. As such if you try to supply an encoded URL, cordova file transfer will try to encode it again. The answer is to set this to false when supplying pre-encoded URLs. Additionally, with URLs not in the simple format of https://www.example.com/image.jpg, we need to split and pop on some other character. I modified the code to do this for my special use case, this will vary by URL construction and format.

I modified from:

                            var ext = '.' + attrs.cacheSrc.split('.').pop();
                            var fileName = id() + ext;
                            $cordovaFileTransfer
                                .download(attrs.cacheSrc, getCacheDir() + fileName, {}, true)

to:

                            if(attrs.cacheSrc.includes('fbcdn') || attrs.cacheSrc.includes('facebook')) {
                                var ext = '.' + attrs.cacheSrc.split('ext=').pop();
                                var encoded = false;
                            }
                            else {
                                var ext = '.' + attrs.cacheSrc.split('.').pop();
                                var encoded = true;
                            }
                            var fileName = id() + ext;
                            $cordovaFileTransfer
                                .download(attrs.cacheSrc, getCacheDir() + fileName, {encodeURI: encoded}, true)

It was also necessary to change the $watch to $observe to allow for late rendering on data bindings on the cacheSrc attribute, like so, cacheSrc="{{url}}". This was not apparent in normal use but I am using the cacheSrc directive nested within a custom parent directive. I modified the code as follows:

                                //scope.$watch('attrs.cacheSrc',
                                 attrs.$observe('cacheSrc',

This change is in line with guidance, as I believe that scope.$watch('attrs.cacheSrc', does not watch for changes in curly brace data bindings. As per...

http://stackoverflow.com/questions/14876112/angularjs-difference-between-the-observe-and-watch-methods

Thanks, hope this is of use.

Regards

Anthony

[mlzxy]

Thank you for helping. I will add the encoding option.

[mlzxy]

I will read the stackoverflow post, thanks again.