Issue
I need help to store my chosen image to localStorage but i don't know where to add it on my angularjs script 🙁 what I want is when i already chose a photo that I want, i like to save it on localStorage and will stay after i refresh or close the browser. Please Help! here is my script below...enter image description hereenter image description hereenter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Photo and store on localStorage using AngularJS 1.X</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<style>
img{width:200px; height:200px;}
</style>enter image description here
</head>
<body>
<div ng-app="plunkr">
<div ng-controller="UploadController">
<form>
<input type="file" ng-file-select="onFileSelect($files)" ng-model="imageSrc">
<!-- <input type="file" ng-file-select="onFileSelect($files)" multiple> -->
</form>
<img ng-src="{{imageSrc}}" />
</div>
</div>
<script>
var app = angular.module('plunkr', [])
app.controller('UploadController', function($scope, fileReader) {
$scope.imageSrc = "";
$scope.$on("fileProgress", function(e, progress) {
$scope.progress = progress.loaded / progress.total;
});
});
app.directive("ngFileSelect", function(fileReader, $timeout) {
return {
scope: {
ngModel: '='
},
link: function($scope, el) {
function getFile(file) {
fileReader.readAsDataUrl(file, $scope)
.then(function(result) {
$timeout(function() {
$scope.ngModel = result;
});
});
}
el.bind("change", function(e) {
var file = (e.srcElement || e.target).files[0];
getFile(file);
});
}
};
});
app.factory("fileReader", function($q, $log) {
var onLoad = function(reader, deferred, scope) {
return function() {
scope.$apply(function() {
deferred.resolve(reader.result);
});
};
};
var onError = function(reader, deferred, scope) {
return function() {
scope.$apply(function() {
deferred.reject(reader.result);
});
};
};
var onProgress = function(reader, scope) {
return function(event) {
scope.$broadcast("fileProgress", {
total: event.total,
loaded: event.loaded
});
};
};
var getReader = function(deferred, scope) {
var reader = new FileReader();
reader.onload = onLoad(reader, deferred, scope);
reader.onerror = onError(reader, deferred, scope);
reader.onprogress = onProgress(reader, scope);
return reader;
};
var readAsDataURL = function(file, scope) {
var deferred = $q.defer();
var reader = getReader(deferred, scope);
reader.readAsDataURL(file);
return deferred.promise;
};
return {
readAsDataUrl: readAsDataURL
};
});
</script>
</body>
</html>
Solution
After loading the selected image, just save the image string to local storage:
function getFile(file) {
fileReader.readAsDataUrl(file, $scope)
.then(function(result) {
localStorage.setItem('myImage', result);
$timeout(function() {
$scope.ngModel = result;
});
});
}
Then you can retreive image from local storage by calling:
imageResult = localStorage.getItem('myImage')
Answered By - AvgustinTomsic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.