CODEWITHSUNDEEP
javascriptimagefilereader
pedrum golriz
pedrum golriz

Reputation: 512

Create image with file contents

I have a drag&drop box where users will drop an image into. I wanted to create a preview before uploading. I have the contents of the image, which contains hundreds of lines of something like this:

png contents

Is there a way to display the image with its contents? My current code for reading and assigning:

var reader = new FileReader();
reader.readAsText(uploadedfile[0]);
reader.onload = function (e) {
      filecontents = this.result;
      reader.abort();
      var image = new Image();
      image.src = filecontents;
      $('#drop p').html('<img src="'+image.src+'"/>');
}

Upvotes: 0

Views: 659

Answers (1)

Ray Nicholus
Ray Nicholus

Reputation: 19890

It's very simple & efficient to do this, no FileReader required, assuming uploadedfile is an "array" of Files or Blobs:

var image = new Image();
image.src = URL.createObjectURL(uploadedfile[0]);

Upvotes: 1

Related Questions