What I want to do…
User clicks ‘upload image’ button
User selects an image from local machine
Image is uploaded to the page
Image is stored in local storage
User can navigate away from view and then return to the view and see the previously uploaded images.
Repeat steps 1 - 5
How I think I can achieve it…
ng-flow plugin to manage user uploads
convert image to base64 and store image as string in local storage
get base64 string and convert it to image for preview.
Why I want to do this…
For phase 1 I need to show my tutor how my application will work, so I just need to imitate the images stored in a database, this is why I'm using local storage - I understand this is bad practice but I also need to show use of local storage.
My tutor encouraged me to use forums and knows I posted this.
Code so far…
My view
<!--
<div flow-init="{target: '/upload', singleFile: false}" flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()">
<div class="jumbotron">
<div class="container">
<div><span class="btn btn-default btn-selectimage" flow-btn flow-attrs="{accept:'image/*'}" >Select image</span></div>
<br><p>Only PNG,GIF,JPG files allowed.</p>
</div>
</div>
<div>
<div class="thumbnail" ng-hide="$flow.files.length">
<img src="images/no-images-placeholder.jpg" />
</div>
<div class="thumbnail col-md-3" ng-show="$flow.files.length" ng-repeat="image in $flow.files">
<img id="image-handle" class="preview-blob" flow-img="image" /><br>
<img class="preview" ng-src="{{imageStrings[$index]}}"/>
<div class="image_option_controls">
<span class="btn glyphicon glyphicon-trash" ng-show="$flow.files.length" ng-click="image.cancel()"></span>
<span class="btn glyphicon glyphicon-heart pull-right" ng-click="image.like()"></span>
</div>
</div>
</div>
</div>
My Controller - so far...
angular.module ( 'myApp' )
.controller (
'ProtectedCtrl', function ($localStorage, $scope)
{
var myImage = [];
$localStorage.myImage = document.getElementById('image-handle');
console.log($localStorage.myImage);
});
I can select images and preview them on the page, when I inspect the page the image src has been converted to base 64. From this point on I'm stuck on how to get the base 64 string and store it.
Sorry for the rookie post, any tips or pointers would be greatly appreciated.
Thanks in advance!