Custom Gallery Tutorial Part 2

 HTML

<div id="result">

        

    </div>

 

    <script src="js/index.js"></script>

JAVASCRIPT:

var parentDiv = document.getElementById('result');

var form = document.getElementById('form')

var images = document.getElementsByTagName('img');

let getlatestImg ;

let windowWidth = window.innerWidth;

 

ShowImages();

form.addEventListener('submit', (e) => {

    e.preventDefault();

    var reader = new FileReader();

 

    var name = document.getElementById('image').files[0].name;

    console.log(name)

    var image = document.getElementById('image').files[0];

    console.log(image);

    reader.readAsDataURL(image);

    reader.addEventListener('load', () => {

        if (image && localStorage) {

            localStorage.setItem(name, reader.result)

            setTimeout(() => {

 

                alert('image stored in local storage');

            }, 1000)

            parentDiv.innerHTML = ''

            ShowImages();

        }

        else {

            alert('Image not stored')

            // console.log(error);

 

        }

    })

 

})

 

function ShowImages() {

    for (let i = 0; i < localStorage.length; i++) {

        let res = localStorage.getItem(localStorage.key(i));

        var image = new Image();

        image.src = res;

        parentDiv.childNodes

 

        parentDiv.appendChild(image);

    }