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

Question

0.00/5 (No votes)

See more:

, +

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

HTML

<!-- 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...

JavaScript

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 29-Dec-15 4:44am

Member 11265111

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sinisa Hajnal · Accepted Answer · 2015-12-29T22:45:00

JavaScript

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

JavaScript

localStorage.setItem("img64", img64);

JavaScript

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

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

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us