CODEWITHSUNDEEP
javascripthtml
Eren Yeager
Eren Yeager

Reputation: 1

Input type-file not showing up even with FileReader

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

<!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;" class="name-div">
    <input id="input-name" type="text" placeholder="Your name">
</div>
<div style="margin: 10px;" class="photo-div">
    <input id="input-photo" type="file" onchange="previewFile()"><br>
    <img src="" height="100" alt="Image preview...">
</div>
 <div style="margin: 10px;" class="date-div">
    <input id="input-date"  type="date" placeholder="Your birthday">
</div>
<div style="margin: 10px;" class="button-div">
    <button id="button">Submit</button>
</div>
<span class="box-1">
    <ul id="messages-1">Name:    </ul>
</span>
<span class="box-2">   
    <ul id="messages-2">Photo:    </ul>
</span>
<span class="box-3">
    <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 = "";
 }
}

Upvotes: 0

Views: 868

Answers (1)

Yushan
Yushan

Reputation: 1047

Steps to Follow

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

  1. Grab the file from the parameter that receives to the event listener callback.
  2. Then pass it to the FileReader.
  3. 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.

  1. Get the base64 from the parameter.
  2. Create an image element to preview the uploaded image.
  3. 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

Upvotes: 1

Related Questions