'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 |
|---|
