I am trying to get an input type-file, append it to unordered list and make it show up in browser But it's not showing up and browser not showing any errors Please help. I am trying to solve this problem already 3 days. I recently started coding, please don't make fun of me This is my own project in order to learn better JavaScript My html

enter code here<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascripttutorial</title>
<style>
    .name-div {
        color: aliceblue;

    }
    .photo-div {
        color: aliceblue;

    }
    .date-div {
        color: aliceblue;

    }
    .box-1 {
        border: 1px solid black;
        padding: 10px;
        display: flex;
        flex-direction: column;
        height: 500px;
        width: 100px;
        float: left;
    }
    .box-2 {
        border: 1px solid black;
        padding: 10px;
        display: flex;
        flex-direction: column;
        height: 500px;
        width: 200px;
        float: left;
    }
    .box-3 {
        border: 1px solid black;
        padding: 10px;
        display: flex;
        flex-direction: column;
        height: 500px;
        width: 150px;
        float: left;
        
    }
    body {
        margin-left: 20px;
        margin-right: 20px;
    }</style> <script src="script.js"></script></head><body>
<div style="margin: 10px;" >
    <input id="input-name" type="text" placeholder="Your name">
</div>
<div style="margin: 10px;" >
    <input id="input-photo" type="file" onchange="previewFile()"><br>
    <img src="" height="100" alt="Image preview...">
</div>
 <div style="margin: 10px;" >
    <input id="input-date"  type="date" placeholder="Your birthday">
</div>
<div style="margin: 10px;" >
    <button id="button">Submit</button>
</div>
<span >
    <ul id="messages-1">Name:    </ul>
</span>
<span >   
    <ul id="messages-2">Photo:    </ul>
</span>
<span >
    <ul id="messages-3">Date:     </ul>
</span>
<script async src="script.js"></script></body></html>>

My script

window.onload=function(){
var inputName = document.getElementById('input-name');
var inputPhoto = document.getElementById('input-photo');
var inputDate = document.getElementById('input-date');
var button = document.getElementById('button');
var messages1 = document.getElementById('messages-1');
var messages2 = document.getElementById('messages-2');
var messages3 = document.getElementById('messages-3');
button.addEventListener("click", function(){
 var newMessage1 = document.createElement("li");
 var newMessage2 = document.createElement("li");
 var photo = document.createElement("img");
 var newMessage3 = document.createElement("li");
 newMessage1.innerHTML = inputName.value;
 photo.setAttribute("style", "height: 30px; widht: 30px;");
 var reader1 = new FileReader();
 reader1.addEventListener("onloadend", function(){
   reader1.readAsDataURL(inputPhoto);
   photo.src = reader1.result;
 });
 newMessage3.innerHTML = inputDate.value;
 messages1.appendChild(newMessage1);
 messages2.appendChild(newMessage2)
 messages3.appendChild(newMessage3);
 newMessage2.appendChild(photo);
 inputName.value = "";

 inputDate.value = "";
});
}
function previewFile() {
 var preview = document.querySelector('img');
 var file    = document.querySelector('input[type=file]').files[0];
 var reader  = new FileReader();

 reader.onloadend = function () {
   preview.src = reader.result;
 }

 if (file) {
   reader.readAsDataURL(file);
 } else {
   preview.src = "";
 }
}

CodePudding user response：

Steps to Follow

Listen to the change event fire by the image file upload input on an image upload.

Grab the file from the parameter that receives to the event listener callback.
Then pass it to the FileReader.
That's it in here.

inputPhoto.addEventListener("change", (e) => {
  var file = e.target.files[0];
  fileReader.readAsDataURL(file);
});

Now listen to the load event fire by the FileReader.

Get the base64 from the parameter.
Create an image element to preview the uploaded image.
Then set the base64 to that image src attribute.

fileReader.addEventListener("load", (e) => {
  var imgUploadWrap = document.getElementsByClassName("photo-div")[0];
  var img = document.createElement("img");
  var base64 = e.target.result;

  img.setAttribute("id", "uploaded-img");
  img.height = 100;
  img.src = base64;
  imgUploadWrap.append(img);
});

Notes:

I create a new image element on upload because it will be easier to reset it.
If you listen to the load event, not loadend, then you don't have to handle the file empty scenario because the load event is fired only if the upload is successful.

Finally when clicking the submit button, set the preview image element's src attribute to the image element inside the message.

if (uploadedImg) {
  photo.height = 60;
  photo.src = uploadedImg.src;
  uploadedImg.remove();
}

Full Code - https://codesandbox.io/s/input-type-file-not-showing-up-even-with-filereader-71891729-u5bvft?file=/script.js

CodePudding user response：

Looks like the problem is here:

reader1.addEventListener("onloadend", function(){
   reader1.readAsDataURL(inputPhoto);
   photo.src = reader1.result;
 });

Here, you are calling the readAsDataURL inside the callback onl oadend, which never gets called because you are calling the readAsDataURL inside the callback.

So you should do this:

reader1.addEventListener("onloadend", function(){
   photo.src = reader1.result;
 });
reader1.readAsDataURL(inputPhoto);