John Schultz John Schultz - 3 months ago 8
HTML Question

passing, dynamically created objects, to a function

I've created a jQuery UI Accordion image loader that dynamically adds or removes panels. Inside each panel is an image input form control and at the end of the document is a function that is supposed to change the img src in the panel to the newly selected image. Unfortunately, I am getting:

cannot read 'files' of undefined
. I understand why its doing this, I just need a way to dynamically add the panels AND be able to update the img src for the panel that loaded the image.

My code, so far, is:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- css links -->
<link href="/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
<!-- /css links -->
<!-- js files -->
<script src="/Scripts/jquery-3.1.0.js"></script>
<script src="/Scripts/jquery-ui-1.12.0/jquery-ui.js"></script>
<!-- /js files -->
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script lang="en" type="text/javascript">
$(function () {
$("#PrimaryImageAccordion").accordion({
collapsible: true
});
});
</script>
<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
<h4 class="PrimaryImageTitle">Primary Image</h4>
<div>
<div class="row form-group">
<label for="ImageSelector" class="control-label col-md-2">Project Image</label>
<div class="col-md-10">
<input type="file" id="ImageSelector" onchange="ImageSelector_Change(this);" /><br />
<img id="Image" src="#" style="width: 100px; visibility: hidden;" />
</div>
</div>
</div>
</div>
<script lang="en" type="text/javascript">
function btnAddPrimaryImage_Click() {
var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
template += "<div class='AccordionPanel'><div class='row form-group'>\n";
template += "<label for='ImageSelector' class='control-label col-md-2'>Project Image</label>\n";
template += "<div class='col-md-10'>\n";
template += "<input type='file' id='Image1Selector' /><br />\n";
template += "<img id='Image' src='#' style='width: 100px; visibility: hidden;' />\n";
template += "</div></div></div>\n";

$("#PrimaryImageAccordion").append(template);

$("#PrimaryImageAccordion").accordion("refresh");
}

function removePanel(a) {
$(a).parent().next().remove();
$(a).parent().remove();
$("#PrimaryImageAccordion").accordion("refresh");
return false;
}

function ImageSelector_Change(object, input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}

reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>

</html>


Update 1

Changed my main selector/loader function as follows:

function ImageSelector_Change(input) {
var object = $(input).parent().find('img#Image');

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
object.attr("src", e.target.result);
object.css("visibility", "visible");
}

reader.readAsDataURL(input.files[0]);
}
}


only problem is that it loads the first image only, not the additional images

Answer

The IDs must be unique.

So in the function btnAddPrimaryImage_Click I corrected how the new elements are added to the accordion using an incremental variable.

The function ImageSelector_Change needs to get two parameters:

  • this: in order to get image
  • image id where to put the loaded image.

Moreover, because you are using bootstrap I suggest you to avoid jQuery 3.x for compatibility issues.

The snippet:

$(function () {
  $("#PrimaryImageAccordion").accordion({
    collapsible: true
  });
});

 var idCounter = 0;
    function btnAddPrimaryImage_Click() {
        idCounter++;
        var template = "<h4 class='PrimaryImageTitle'>Primary Image<a onclick='removePanel(this);' style='float:right'>X</a></h4>\n";
        template += "<div class='AccordionPanel'><div class='row form-group'>\n";
        template += "<label for='ImageSelector'" + idCounter + " class='control-label col-md-2'>Project Image</label>\n";
        template += "<div class='col-md-10'>\n";
        template += "<input type='file' id='ImageSelector" + idCounter + "' onchange='ImageSelector_Change(this,\"Image" + idCounter + "\");' /><br />\n";
        template += "<img id='Image" + idCounter + "' src='#' style='width: 100px; visibility: hidden;' />\n";
        template += "</div></div></div>\n";

        $("#PrimaryImageAccordion").append(template);

        $("#PrimaryImageAccordion").accordion("refresh");
    }

    function removePanel(a) {
        $(a).parent().next().remove();
        $(a).parent().remove();
        $("#PrimaryImageAccordion").accordion("refresh");
        return false;
    }

    function ImageSelector_Change(object, input) {
        if (object.files && object.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById(input).src = e.target.result;
                document.getElementById(input).style.visibility = "visible";
            }

            reader.readAsDataURL(object.files[0]);
        }
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<br /><br />
<button type='button' onclick='btnAddPrimaryImage_Click();' class='btn btn-default'> Add </button>
<div id="PrimaryImageAccordion">
    <h4 class="PrimaryImageTitle">Primary Image</h4>
    <div>
        <div class="row form-group">
            <label for="ImageSelector" class="control-label col-md-2">Project Image</label>
            <div class="col-md-10">
                <input type="file" id="ImageSelector" onchange="ImageSelector_Change(this, 'Image');" /><br />
                <img id="Image" src="#" style="width: 100px; visibility: hidden;" />
            </div>
        </div>
    </div>
</div>

Comments