Saving Images to local file system = saving Data usage, Ionic-Way!

Requirements: at the time of writting this directive, cordova version was below 5, and it used "ant" for build process on android. This might not work with newer versions. Any help with porting this to newer version is apperiacted. PRs are welcomed.

image-saver

Ionic directive for saving remote images to local file system in HTML mobile Apps.

If you have remote images served from a external server and you need to save them to your device to

• avoid downloading them again and again, consuming more data

This module is created for the very same reason All image files are stored in a Folder (cache folder) and NOT in the localStorage.

Installation

This plugin is dependent on 3 cordova plugins:

• cordova-plugin-file
• cordova-plugin-file-transfer
• cordova-plugin-network-information

You would need to install ngCordova also.

bower install ngCordova

bower install image-saver

Include ngCordova.js and imageSaver.js in your index.html, and place it as an angular-dependency

angular.module('yourAwesomeApp', ['ionic','ngCordova','image-saver']

Usage

image-saver is a directive that is included on a <img> tag. required attributes

• 1. name (remote-server url ) REQUIRED
• 2. directory (name of the directory you want to store your images) REQUIRED

Example:

 <img image-saver name="{{your scope variable to bind the URL of remote Image URL}}" directory="Images">

if your image url is http://bower.io/img/bower-logo.png

The Image will be stored with name: bower-logo.png (the last segment of the url path)

Note: src tag on <img> is not required, instead give _src_ to _name_ attribute.

This directive creates a directory in cache folder, if not exsit, and downloads the file. Next time if apps open up, the directive checks for existing file and it uses that instead of doing HTTP request again.

Future To-dos

1. Give developer option to which cordova directory he/she wants to store images to.