I've got a few rows of data. Each row has the ability to submit an image with it which is associated with the row. I currently have a submit file button for each of these rows.
This is the code for how each row is generated:
<td class='col-lg-1 image-p-col-major image-p pointer no-pad'>
<label for='files' class='text-center pointer non-bold' style='width:77px;line-height:34px;'>File</label>
<input type='file' accept='image/jpg, image/jpeg, image/png' id='files' style='display:none;width:77px;'/>
</td>
When the user uploads an image for the row, I'm trying to show the image that was submitted in place of that file upload button. The issue I'm running into, is that whenever I select a file upload button, I'm unable to get that specific element. It always returns be the first file upload button in the DOM.
Here's the code for how I'm trying to replace the button with the specific image:
$("image-p input").change(function(e) {
console.log($(this)); // This will only ever be the first input button, never the element that was actually clicked
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
// This places the image over the file upload botton - already works
// The image will always be placed over the first input button,
// not the one that was actually clicked
$(this).parent().parent().children(".image-p").children("input").after(img);
}
});
It is going to be possible to have a large amount of these rows that need images with them. Is there any way to find which button was specifically pressed? I'd like to not associate an id with every single button if possible.
Thank you
