Click here to Skip to main content
14,693,770 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
<!-- 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/*'}" >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!
Posted
Comments
Sinisa Hajnal 30-Dec-15 4:42am
   
For each step you can google. There are plenty of examples. Although I think most, if not all, image conversion examples will include ajax call to server code.

Local storage should be easy to find, the storage doesn't care that it is an image, it is just data. See the solution for couple of pointers...

1 solution

function convertImageToBase64(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}


And you get/set to storage with
localStorage.setItem("img64", img64);

var dataImage = localStorage.getItem('img64');
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900