How to code the array of Images in the localstorage?

Question

How to code the array of images in the localstorage?

I cannot make the array of images(base64) into the localstorage. And I want to update back (base64) in input for updating it into the server. Please help me, thank you!

<input type="file" class="file-upload" id="fileUpload">

ready(){
    super.ready();
    this.$.fileUpload.addEventListener('change', (e) => {
        var filesToUpload = this.$.fileUpload;
        var files = filesToUpload.files;
        var maxFiles = files.length;
        var fd = new FormData();

        if (FileReader && files && files.length) {
            for (var i = 0; i < maxFiles; i++) {
                (function(file){
                    var name = file.name;
                    var fr = new FileReader();
                    fr.onload = function(image) {
                        return function(evt) {
                            image.src = evt.target.result;
                        }
                        var arr = [];
                        arr.push(fr.result);

                        if (arr.length == files.length){
                            console.log(arr);
                            localStorage.setItem('arr', JSON.stringify(arr));
                        }
                        // arr.push(fr.result);              
                            // var arr = JSON.parse(localStorage.getItem('arr')) || [];            
                            // arr = fr.result; 
                            // localStorage.setItem('arr', JSON.stringify(arr));

                    }
                    fr.readAsDataURL(file);
                })(files[i]);
            }
        }
    });
}

Side Note: It's probably not good idea, if images are larger you will get error about the size limit. Try indexed DB instead, not sure but you probably can write more data to it. — jcubic, Jun 03 '19 at 08:13
@jcubic, sorry I reply here so late. I understood what is your opinion. The way I could put the max limit size (1MB) in every photo. The localstorage usually can store min 2 MB to 10 MB which depends on all platforms. — Lun Leong, Jun 04 '19 at 01:41
@tony19, I've test according to stackoverflow.com/a/19183658/6277151 but it hadn't stored the data in the localstorage. — Lun Leong, Jun 04 '19 at 02:24

score 1 · Answer 1 · answered Jun 03 '19 at 08:14

1

I think you should move var arr = []; out the loop

answered Jun 03 '19 at 08:14

J. Blue

76
4

It had data in the localstorage without the array. – Lun Leong Jun 03 '19 at 08:23
@LunLeong that's right `var arr = [];` should be outside of the loop, you're creating array with single element so LS always have array with last value. – jcubic Jun 04 '19 at 06:43
@jcubic, I cannot make it. Can you make sure that you show the codes on how to store the array of images in localstorage? – Lun Leong Jun 07 '19 at 02:09

score 0 · Accepted Answer · edited Jun 08 '19 at 08:13

enter image description here

I've made it successfully! I like to share it with those who view this.

<input type="file" class="file-upload" id="fileUpload">
<vaadin-button on-tap="submit">Submit</vaadin-button>

submit(e) {

    e.preventDefault();

    var list = !!localStorage.getItem('imageData') ? JSON.parse(localStorage.getItem('imageData')) : [];
    var input = this.$.fileUpload;
    var files = input.files;

    var reader = new FileReader();
    reader.onload = function(e) {
        // localStorage["imageData"] = reader.result;
        list.push(reader.result);
        localStorage["imageData"] = JSON.stringify(list);
    };
    reader.readAsDataURL(files[0]);

}

How to code the array of Images in the localstorage?

2 Answers2