Preview Image before upload

Question

I have a table. Each row has one cell for image uploading. I want to display the preview. For this I wrote the code below:

var cell8 = row.insertCell(6);
var t8 = document.createElement("input");
t8.type = "file";
t8.id = "img" + index;
t8.name = "img" + index;

var a = document.getElementById('blah_img' + index + '');
a.src = window.URL.createObjectURL(this.files[0]);
t8.onchange = a.src;
cell8.appendChild(t8);

var oImg = document.createElement("img");
oImg.setAttribute('src', 'noimg.png');
oImg.setAttribute('alt', 'your image');
oImg.setAttribute('height', '100');
oImg.setAttribute('width', '100');
oImg.id = "blah_img" + index;
cell8.appendChild(oImg);

While running it gives me an error:

Uncaught TypeError: Cannot read property '0' of undefined.

What's wrong in my code? Please help.

What is `this` intended to be a reference to? Try `t8.files[0]` — Rory McCrossan, Sep 20 '16 at 06:55

Jay Ghosh · Answer 1 · 2016-09-20T06:56:02.867

0

Most probably, this.files is undefined. Thus it's giving the error. Instead of this.files[0], try t8.files[0]

Chobi is an Image Processing Library, implemented in pure Javascript which I have designed to make such things easier. You could check that out too

edited Sep 20 '16 at 06:56

answered Sep 20 '16 at 06:52

Jay Ghosh

674
6
24

This is so unrelated to the OP's problem it's borderline self-promoting spam. – Rory McCrossan Sep 20 '16 at 06:53
I've edited my answer to contain a possible solution – Jay Ghosh Sep 20 '16 at 06:57
While changing this to t8, it shows `Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided` – Rose Sep 20 '16 at 07:01
http://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url Check this out. It might be useful. – Jay Ghosh Sep 20 '16 at 07:37

Preview Image before upload

1 Answers1