I have multiple file inputs and want to generate preview of uploaded files for each input. I'm waiting for change on all of these inputs and then I trigger new FileReader(). Unfortunately the onload action is never triggered, what am I doing wrong?

$("body").on("change", ".file", function(event){
  showPreview(event);
})

function showPreview(event){
	console.log("showPreview started");
  
	var file = event.target.files[0];
        console.log("file loaded: ", file);
  
        var reader = new FileReader();
        console.log("reader initiated: ", reader);
  
        reader.onload = function(event) {
  	  console.log("this never works : ", event);
          console.log(event.target.result);
        };
}

label {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 100px;
}

.preview {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 5px red;
}

<script src=".1.1/jquery.min.js"></script>
<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

I have multiple file inputs and want to generate preview of uploaded files for each input. I'm waiting for change on all of these inputs and then I trigger new FileReader(). Unfortunately the onload action is never triggered, what am I doing wrong?

$("body").on("change", ".file", function(event){
  showPreview(event);
})

function showPreview(event){
	console.log("showPreview started");
  
	var file = event.target.files[0];
        console.log("file loaded: ", file);
  
        var reader = new FileReader();
        console.log("reader initiated: ", reader);
  
        reader.onload = function(event) {
  	  console.log("this never works : ", event);
          console.log(event.target.result);
        };
}

label {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 100px;
}

.preview {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 5px red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

https://jsfiddle/x59gctL5/

• javascript
• jquery
• fileapi

• @Teemu it doesn't, I can't see "this never works" anywhere in the logs. – Wordpressor Commented May 9, 2018 at 11:37
• 1 Hmm. ... You don't do anything with the newly-created reader object. – Teemu Commented May 9, 2018 at 11:38
• 1 Add reader.readAsDataURL(file) to trigger the onload – mplungjan Commented May 9, 2018 at 11:39
• @Teemu yes, I would, but I can't as unload never happens. – Wordpressor Commented May 9, 2018 at 11:39
• Just creating an instance of FileReader doesn't trigger its onload event. As mplungjan said, you've to read a file ... – Teemu Commented May 9, 2018 at 11:40

2 Answers 2

You need to call readAsText() within the event handler.

See documentation

Working code:

function showPreview(event){
  // ... rest of your code

  reader.onload = function(event) {
    console.log("this never works : ", event);
    console.log(event.target.result);
  };

  reader.readAsText(file);
}

You need to trigger the event by reading the actual file

reader.readAsDataURL(file); or reader.readAsText(file);

then you can insert the image:

$span.html('<img src="' + event.target.result + '" />')

or text:

$span.html(event.target.result)

$("body").on("change", ".file", function(event) {
  showPreview(event);
})

function showPreview(event) {
  console.log("showPreview started");
  var $span = $(event.target).prev();
  var file = event.target.files[0];
  console.log("file loaded: ", file);

  var reader = new FileReader();
  console.log("reader initiated: ", reader);

  reader.onload = function(event) {
    console.log(event.target.result);
    $span.html('<img src="' + event.target.result + '" />')

  };
  reader.readAsDataURL(file);
}

label {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 100px;
}

.preview {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 5px red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>

<label>
  <span class="preview"></span>
  <input type="file" class="file">
</label>