Javascript - How to create element, add it into array and display it

Question

I am trying to create a web-app which allows the user to upload an image from their pc, and from that, it will create an object, and add it into an array (to have record of it and its properties) and also display it on screen.

I have created a codepen: https://codepen.io/eve_mf/pen/XebVWv

html:

 <form id="form" action="" method="post" enctype="multipart/form-data">
  <div class="file-uploader-wrapper">
      <input id="file-uploader" class="file-uploader-input" type='file' onchange="retrieveImageFromUpload(this);"/>
      <button class="file-uploader-btn" type="button">Select an image</button>
  </div>
</form> 

 <div id="map-view"></div>

js:

let allImages = [];
let displayImages = document.getElementById("map-view");
let imagesCounter = 0;

$(".file-uploader-btn").click(function() {
  $("#file-uploader").click();
});

function retrieveImageFromUpload() {
   let imgReader = new FileReader();
   imgReader.readAsDataURL(document.getElementById("file-uploader").files[0]);

   imgReader.onload = function (imgReaderEvent) {
        let imageUploadedName = imgReaderEvent.target.result;
        return readUploadedImage(imageUploadedName);
    };
}

//create HTML image from the uploaded img
function readUploadedImage(imageUploadedName) {

  imagesCounter++;

  let img = document.createElement('img');
  img = {
    "id": 'screen-' +  imagesCounter,
    "src": imageUploadedName,
    "alt": 'Default-alt'
  };

 allImages.push(img);

  console.log(allImages);

var imgHTML = img.cloneNode(true);
imgHTML = "<img id='"+ img.id + "' src='" + img.src + "' alt ='" + img.alt + "' />";
displayImages.appendChild(imgHTML);

console.log("-------------");

}

My problem begins after creating the image element; I think I am getting confused but I can not really understand where or why.

I create an image with "let img = document.createElement('img');"
Then, I set its properties as object, and I think it is here where I get messed up. Then, I put this object into my array (called allImages), so, this is what I want so far.
But then, a part from adding this object into my array, I want to display it as an HTML image, I am trying this with "appendChild", But definitely is something really wrong because I get the error that I am not operating with a node element.

Can someone give me a push to the right path?

Thank you

Òscar Raya · Accepted Answer · 2017-09-15 11:34:42Z

1

Here I corrected your codepen.

You have to create a DOM element in order to add it to the page:

var imgHTML = document.createElement("IMG");
imgHTML.setAttribute("id", img.id);
imgHTML.setAttribute("src", img.src);

Tested and working.

edited Sep 15, 2017 at 11:34

answered Sep 15, 2017 at 11:26

Òscar Raya

6086 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2017-09-15 11:10:33Z

0

You're redifining img as a regular object literal, loosing the image in the process.

You have to set the properties one by one

let img = document.createElement('img');
img.id  = 'screen-' +  imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt;

What you're doing is pretty much the same as

let x = 'image';

x = {id : 4};

console.log(x); // no suprise, it's just {id : 4} and the string was lost

answered Sep 15, 2017 at 11:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

David · Accepted Answer · 2017-09-15 11:11:13Z

0

It was a node element:

let img = document.createElement('img');

But then you got rid of the node element and replaced it with a custom object:

img = {
  //...
};

This completely removed the node element, now all img has is your custom object with those three properties. Instead of creating a new object, just set the properties directly:

let img = document.createElement('img');
img.id = 'screen-' +  imagesCounter;
img.src = imageUploadedName;
img.alt = 'Default-alt';

answered Sep 15, 2017 at 11:11

David

221k42 gold badges245 silver badges337 bronze badges

Collectives™ on Stack Overflow

Javascript - How to create element, add it into array and display it

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related