Creating an array of images using input fields and showcasing them as a dynamic slider

Question

Creating an array of images using input fields and showcasing them as a dynamic slider

I'm currently working on a challenge involving creating an array of images using an input field and then displaying the array of images as a slider in JavaScript. If anyone can help me, please provide a solution.

Could you kindly share the JavaScript code for this?

document.querySelector("#a").addEventListener("change", function(){
    const reader = new FileReader();
    reader.addEventListener("load", () => {
        localStorage.setItem("recent-image", reader.result)
    });
    reader.readAsDataURL(this.files[0]);
});
document.addEventListener("DOMContentLoaded()", () => {
    
    const imageurl = localStorage.getItem("recent-image");

    if(imageurl){
        document.querySelector("#b").setAttribute("src", imageurl);
    }
});

Is it possible to achieve this with an array? Please let me know your answer.

Currently, only one image is being stored, but I would like to be able to store multiple images in local storage using an array. Can you assist me with this?

javascript arrays image arraylist display

Answer 1

Answer №1

The main issue here is establishing the local storage to store the images for later retrieval and display. Below is a sample solution:

var images = localStorage.getItem('images') || [];

function saveImages() {
    localStorage.setItem('images', JSON.stringify(images));
}

function drawImages() {
    var slider = document.getElementById('slider');
    slider.innerHTML = '';
    for (var i = 0; i < images.length; i++) {
        const img = images[i];
        const html_img = document.createElement('img');
        html_img.src = img;
        html_img.alt = 'Alt img';
        html_img.width = 200;
        html_img.height = 150;
        slider.appendChild(html_img);
    }
}

document.querySelector("#a").addEventListener("change", function(){
    const reader = new FileReader();
    reader.addEventListener("load", ()=>{
        images.push(reader.result);
        drawImages();
    });
    reader.readAsDataURL(this.files[0]);
});

document.addEventListener("DOMContentLoaded()", drawImages);

Answer 2

The main issue here is establishing the local storage to store the images for later retrieval and display. Below is a sample solution:

var images = localStorage.getItem('images') || [];

function saveImages() {
    localStorage.setItem('images', JSON.stringify(images));
}

function drawImages() {
    var slider = document.getElementById('slider');
    slider.innerHTML = '';
    for (var i = 0; i < images.length; i++) {
        const img = images[i];
        const html_img = document.createElement('img');
        html_img.src = img;
        html_img.alt = 'Alt img';
        html_img.width = 200;
        html_img.height = 150;
        slider.appendChild(html_img);
    }
}

document.querySelector("#a").addEventListener("change", function(){
    const reader = new FileReader();
    reader.addEventListener("load", ()=>{
        images.push(reader.result);
        drawImages();
    });
    reader.readAsDataURL(this.files[0]);
});

document.addEventListener("DOMContentLoaded()", drawImages);

Creating an array of images using input fields and showcasing them as a dynamic slider

Answer №1

Similar questions

What are the steps to conducting a search on mongodb?

A beginner's guide to efficiently indexing tables in AngularJS

Error: Unforeseen token encountered while attempting to import React in Javascript

The `user-select: none` property displays distinct behavior in Safari

Class selectors can be used for jQuery drag and drop functionality

Notify users of any unsave changes before allowing them to navigate to a different page in ReactJS

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Transform the date and display it for every element in a PHP array

How can I extract a substring using jQuery?

What is the best way to navigate a carousel containing images or divs using arrow keys while maintaining focus?

Visualizing data in Angular js using JSON Object

What is the process for switching a button on and off?

Tips for identifying a pair of numbers (with varying ranges) in which one number must be present at all times

Ways to integrate an HTML document into a Python tkinter GUI window

Error: Module not located or Image unable to load in React JS

Input the chosen icon list values into a designated box

Node.Js Web Scraping: How to Extract Data from JavaScript-Rendered Pages Using Request

What causes the entire page to refresh when I attempt to adjust the font size using jQuery?

Encountering a compile-time issue while constructing a basic partial array class in C++

Firebase Database Integration with AngularJS: Loading Results Dynamically upon Button Click or Action