How can I add an uploaded image into an object array?

Question

I am creating an album website just to learn Javascript. I have input boxes to add the title, artist, and year of an album. When "Add Album" is pressed, it inserts this info into an array on an object called albumList, then displays the info in list elements. I want to know if it's possible to allow the user to also upload an image, which is also pushed into the array and displayed along with the title, artist, and year.

I have tried everything I can think of and googled for a whole day but no luck. Is this even possible? This is my JS currently, I have removed everything I tried to do with uploading images to give me a clean slate, so to speak:

var albumList = {
    albums: [],
    addAlbum: function(title, artist, year) {
        this.albums.push({
            title,
            artist,
            year
        });
    }

};


var handlers = {
    addAlbum: function() {
        var addAlbumTitle = document.getElementById("addAlbumTitle");
        var addAlbumArtist = document.getElementById("addAlbumArtist");
        var addAlbumYear = document.getElementById("addAlbumYear");

        albumList.addAlbum(addAlbumTitle.value, addAlbumArtist.value, addAlbumYear.valueAsNumber);
        view.displayAlbums();
    }
};


//Only used to display info on screen. 
var view = {
    displayAlbums: function() {
        var albumUl = document.querySelector('ul');
        albumUl.innerHTML = '';

        albumList.albums.forEach(function(album, position) {
            var albumLi = document.createElement('li');
            var showAlbum = '';
            showAlbum = album.title + ' ' + album.artist + ' ' + album.year;

            albumLi.id = position;
            albumLi.textContent = showAlbum;
            albumUl.appendChild(albumLi);
        });
    }

};

And my HTML:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h1>My top 100 albums</h1>   

    <div>
        <input id="addAlbumTitle" type="text" placeholder="Title">
        <input id="addAlbumArtist" type="text" placeholder="Artist">
        <input id="addAlbumYear" type="number" placeholder="Year">   
    </div>

    <button onclick="handlers.addAlbum()">Add Album</button>

    <ul></ul>

    <script src="test.js"></script>
</body>



</html>

score 0 · Answer 1 · answered Nov 11 '19 at 16:48

Assuming you are going to have a screen where you are going to manually enter the album information, you could also add a input for uploading a file like Carl does in this answer:

https://stackoverflow.com/a/31710348/10355063

var fileTag = document.getElementById("filetag"),
    preview = document.getElementById("preview");

fileTag.addEventListener("change", function() {
  changeImage(this);
});

function changeImage(input) {
  var reader;

  if (input.files && input.files[0]) {
    reader = new FileReader();

    reader.onload = function(e) {
      preview.setAttribute('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

From there, you should be able to create an Image object and add it normally to your array. From there take the src of the object and display it along with the rest of your album information.

<input type="file" id="filetag">
<img src="" id="preview">

Hi, thanks for this. I will give it a try. However, I'm a bit confused with what to do after implementing this code. Do I need to change my addAlbum function to take an additional "image" variable, and on my display albums function, do I need to call something like albums.image.src to show the image on the screen? — , Nov 11 '19 at 19:29
Yes, you will need to add the image to your array. The best way doing that is probably to create an Image object and include that in your parameters. As for displaying the image, you should set the src of the image element in HTML as the src from the image object, yes. — floating_camel, Nov 11 '19 at 20:47

score 0 · Answer 2 · answered Nov 11 '19 at 19:39

I believe that you misuse the word "upload". Since you are only playing client-side, you are not really uploading anything anywhere.

You can load a local image file provided by the user using <input type='file'> and then use blobs to store the data in your array. Since the File object provided by the input is just a specific type of blob, no conversion is necessary to store the data.

You can than display images stored in blobs by setting the src attribute of an image to a URL created using URL.createObjectURL.

Here is a working example:

'use strict';

const myImages = [];

function addImage(imageBlob) {
  myImages.push(imageBlob);
}

function redrawImages() {
  const divForImages = document.getElementById('myImages');
  divForImages.innerHTML = '';
  myImages.forEach((imageBlob) => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(imageBlob);
    divForImages.appendChild(img);
  });
}

function addImageAndRedraw() {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length === 1) {
    addImage(fileInput.files[0]);
    redrawImages();
  } else {
    alert('No file selected. Select a file and try again.');
  }
}

const button = document.getElementById('button');
button.addEventListener('click', addImageAndRedraw);

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>My images</h1>
    <input id="fileInput" type="file" accept="image/*" multiple="false" value="Select image">
    <input id="button" type="button" value="Add image and redraw">   
    <hr>
    <div id="myImages"></div>
    <script src="album.js"></script>
  </body>
</html>

How can I add an uploaded image into an object array?

2 Answers2

Linked