'How do i show an image via input while a certain object is selected ( nft card/image previewer )

How do I use file input to load a picture, store the picture in cookies, or some other to store te picture that doesn't use an alternate language, and only show said picture when a particular object (nft card) is being displayed. The program is basically an image slider that shows information along with a picture pertaining to the current selected nft card.

const prevbtn = document.querySelector("#prev-btn");
const nextbtn = document.querySelector("#next-btn");
let cardName = document.querySelector("#name");
let cardDescription = document.querySelector("#description");
let cardPrice = document.querySelector(".eth");
let cardTime = document.querySelector("#time2");
let cardCreator = document.querySelector("span");
let deck = [];
let card;

let formSubmit = document.querySelector(".formsubmit");
let formName = document.querySelector("#form-name");
let formDescription = document.querySelector("#description2");
let formPrice = document.querySelector("#form-price");
let formTime = document.querySelector("#time-left");
let formCreator = document.querySelector("#creator-name");
let formNFTart = document.querySelector("#nft-art")

let selectedFile;

let picShow = document.getElementById("newimagetoggle");
let picChange = document.querySelector(".nft-card-image")
let newElement = document.createElement("input");
newElement.setAttribute("type", "file");
newElement.setAttribute("accept", "image/*");

//NFT Card Class creator
class NFTcard {
    constructor(id, name, description, price, time, creator, image) {
        this.id = id
        this.name = name
        this.description = description
        this.price = price
        this.time = time
        this.creator = creator
        this.imageID = image
    }
};


// set starting card
let currentCard = 0

// create deck to store nft Card creations
deck = [];


// Create new NFT and change NFT Image from user input 
let createNewNFT = function () {

    // new image
    selectedFile = newElement.files[0]
    let reader = new FileReader();
    reader.addEventListener("load", function () {
        // convert image file to base64 string
        picChange.src = reader.result;
    }, false);

    if (selectedFile) {
        reader.readAsDataURL(selectedFile);
    }

    // retrieve user nft data and place in new nft card object
    let newNftName = formName.value

    newNftName = new NFTcard(`${deck.length}`, `${formName.value}`, `${formDescription.value}`, `${formPrice.value}eth`, `${formTime.value}`, `${formCreator.value}`, `${deck.length}`);

    deck.push(newNftName);

    // clear input fields

    formName.value = ""
    formDescription.value = ""
    formPrice.value = ""
    formTime.value = ""
    formCreator.value = ""
}

picShow.addEventListener('click', function () {
    newElement.click();
});

formSubmit.onclick = function () {
    createNewNFT();
};

// Switch to current card

let switchCard = function () {
    card = deck[currentCard];
    cardName.textContent = card.name;
    cardDescription.textContent = card.description;
    cardPrice.textContent = card.price;
    cardTime.textContent = card.time;
    cardCreator.textContent = card.creator;
    picChange.src = card.imageID
}

// load initial card 
window.addEventListener("DOMContentLoaded", function () {
    switchCard(currentCard);
});

//Next button switch card 
nextbtn.addEventListener('click', function () {
    currentCard++;
    if (currentCard > deck.length - 1) {
        currentCard = 0
    };
    switchCard(currentCard);
})

//Prev button switch card 
prevbtn.addEventListener('click', function () {
    currentCard--;
    if (currentCard < 0) {
        currentCard = deck.length - 1;
    }
    switchCard(currentCard)
})```


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source