I have this app where I take an image , save it locally to the filesystem then display it ‘temporarily’ , I’m trying to save the file url for the image on SQL ( sqlcipher ) then assign id for each image and display them ‘permanently’ , eventually upload them to server . So far I can capture the image and save them on filesystem ( cache folder ) for the app. I created the table to save and insert the images , but still don’t know how to connect it to the dom (html) and insert the $scope.images inside the SQL table then display them .
Controller
$scope.images = [];
$scope.image = null;
$cordovaCamera.getPicture(options).then(function(imagePath) {
// Grab the file name of the photo in the temporary directory
var currentName = imagePath.replace(/^.*[\\\/]/, '');
alert(currentName);
//Create a new name for the photo to avoid duplication
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
// If you are trying to load image from the gallery on Android we need special treatment!
if ($cordovaDevice.getPlatform() == 'Android' && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
window.FilePath.resolveNativePath(imagePath, function(entry) {
window.resolveLocalFileSystemURL(entry, success, fail);
function fail(e) {
console.error('Error: ', e);
}
function success(fileEntry) {
var namePath = fileEntry.nativeURL.substr(0, fileEntry.nativeURL.lastIndexOf('/') + 1);
// Only copy because of access rights
$cordovaFile.copyFile(namePath, fileEntry.name, cordova.file.dataDirectory, newFileName).then(function(success) {
$scope.image = newFileName;
$scope.images.push(newFileName);
}, function(error) {
$scope.showAlert('Error', error.exception);
});
alert(fileEntry.nativeURL);
};
});
} else {
var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
// Move the file to permanent storage
$cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function(success) {
$scope.image = newFileName;
$scope.images.push(newFileName);
}, function(error) {
$scope.showAlert('Error', error.exception);
});
alert(namePath);
}
},
function(err) {
// Not always an error, maybe cancel was pressed...
})
};
// Returns the local path inside the app for an image
$scope.pathForImage = function(image) {
if (image === null) {
return '';
} else {
return cordova.file.dataDirectory + image;
}
$scope.$apply(function() {
$scope.images.push(pathForImage(image));
});
};
SQL
$cordovaSQLite.execute(_db, 'CREATE TABLE IF NOT EXISTS Image' +
'(' +
'g_id integer primary key, ' +
'imageUrl TEXT,' +
'timeStamp TEXT' +
')');
function SaveImgInDB(jsonImgObj) {
var imgObj = {};
imgObj.g_id = DataCheck(jsonImgObj.g_id);
imgObj.imageUrl = DataCheck(jsonImgObj.imageUrl);
imgObj.timeStamp = DataCheck(jsonImgObj.timeStamp);
InsertImgInDB(imgObj);
}
function InsertImgInDB(imgObj) {
var query = 'INSERT INTO Image' +
'(' +
'g_id integer primary key, ' +
'imageUrl TEXT,' +
'timeStamp TEXT' +
')';
$cordovaSQLite.execute(_db, query, [
imgObj.g_id,
imgObj.imageUrl,
imgObj.timeStamp
]).then(function(res) {
Logger.log("Img Insert / ID -> " + res.insertId);
},
function(err) {
Logger.log('img Insert' + err.message);
});
}
HTML
<ion-scroll>
<img ng-repeat="image in images" ng-src="{{pathForImage(image)}}" style="width: 100%; height: 100%;"/>
</ion-scroll>
Any help will be appreciated.
Thanks