How to read image file using plain javascript?

Question

I am new to javascript and I am currently having problem with one of my projects which includes viewing of an image from the root folder of the website. Here is my current code:

var reader = new FileReader();

    reader.onload = function(event){
           var dataUri = event.target.result,
               img = document.createElement("img");

               img.src =  dataUri;
               document.body.appendChild(img);
    };

    reader.onerror = function(event){
           console.log("File could not be read: " + event.target.error.code);
    };

reader.readAsDataURL("/uploads/extras/item_a/image1.png");

That's my code and it doesnt show anything. And in my console it gives me an error or Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Answer 1

Here's the correct way to do it

  var openFile = function(file) {
    var input = file.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output' style="height:100px; width:100px;">

Do a little investigation to know where is the error in your code, that's better to learn

When you give it up, just leave a comment here, i'll be glad to help again! :)