How do I upload image/s and store in Local Storage (angularjs)

Question

What I want to do…

1. User clicks ‘upload image’ button
2. User selects an image from local machine
3. Image is uploaded to the page
4. Image is stored in local storage
5. User can navigate away from view and then return to the view and see the previously uploaded images.
6. Repeat steps 1 - 5

How I think I can achieve it…

1. ng-flow plugin to manage user uploads
2. convert image to base64 and store image as string in local storage
3. 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 stack overflow and knows I posted this.

Code so far…

My view

<!-- Upload multiple images with the extensions of png,jpg, jpeg & gif -->
<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/*'}" onchange="previewFile()">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!

Answer 1

I recently read an article for the very same purpose and one way to do this for an image, is to load into a canvas element. Then, with a canvas, you can read out the current visual representation in a canvas as a Data URL. Following is the code snippet

// Get a reference to the image element
   var elephant = document.getElementById("elephant");

// Take action when the image has loaded
 elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Draw image into canvas element
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
}
}, false); 

DataURL is a base64 string as localstorage cannot store images directly and It is not that common to store images in localstorage. I maybe wrong though. However, here is a link that is gonna link help you further https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/