Displaying user-uploaded images for specific NFT cards in a JavaScript slider

NFT
1

I’m working on a JavaScript-based NFT card slider. Each card shows info and a picture. I want users to upload images for their NFT cards. How can I:

  1. Let users pick an image file
  2. Save it (maybe using cookies)
  3. Show the right image when its card is active

I don’t want to use other languages, just JavaScript. Here’s a simplified version of what I have so far:

let currentCard = 0;
let deck = [];

function NFTcard(name, description, image) {
  this.name = name;
  this.description = description;
  this.image = image;
}

function addNewNFT() {
  let imageInput = document.getElementById('nft-image');
  let file = imageInput.files[0];
  let reader = new FileReader();
  
  reader.onload = function(e) {
    let newNFT = new NFTcard(
      document.getElementById('nft-name').value,
      document.getElementById('nft-description').value,
      e.target.result
    );
    deck.push(newNFT);
  }
  
  if (file) {
    reader.readAsDataURL(file);
  }
}

function showCurrentCard() {
  let card = deck[currentCard];
  document.getElementById('card-name').textContent = card.name;
  document.getElementById('card-description').textContent = card.description;
  document.getElementById('card-image').src = card.image;
}

// Event listeners for navigation and adding new NFTs

Any tips on improving this? Thanks!

2

hey there elias87! your nft card slider sounds really cool :slight_smile: i’m curious, have you thought about using localStorage instead of cookies for saving the images? it might be easier to work with and give you more storage space. also, how many cards are you planning to have in the slider? if it’s a lot, you might wanna think about lazy loading the images to make it smoother.

for letting users pick an image file, you’re already on the right track with the file input. maybe you could add a preview of the image before they submit it? that’d be a nice touch.

oh, and for showing the right image when its card is active, you could use data attributes on your card elements to match them up with the corresponding nft in your deck array. something like:

function showCurrentCard() {
  let card = deck[currentCard];
  let cardElement = document.querySelector(`[data-nft-index="${currentCard}"]`);
  cardElement.querySelector('.card-name').textContent = card.name;
  cardElement.querySelector('.card-description').textContent = card.description;
  cardElement.querySelector('.card-image').src = card.image;
}

what do you think? and how are you handling the slider navigation? are you using any animations when switching between cards?

3

hey elias87, try using localStorage for image storage—it’s easier and offers more space. add a live preview and use data attributes to link images with cards. how’s your slider nav? any smooth transitions?

4

Your approach looks solid, Elias87. For image storage, consider using IndexedDB instead of cookies. It’s better suited for larger data like images and provides more robust storage capabilities. To optimize performance, you might want to implement lazy loading for the images, especially if you’re dealing with a large number of cards.

For displaying the correct image, you could use a unique identifier for each card and store it along with the image data. When showing a card, retrieve the image using this identifier. Also, consider adding error handling for cases where an image fails to load.

Regarding the slider functionality, have you thought about adding keyboard navigation or touch support for mobile users? This could greatly enhance the user experience. Lastly, to improve performance, you might want to look into using requestAnimationFrame for smoother transitions between cards.