2
My question is the following: I am customizing a bootstrap File Input, and at the same time transforming it into a plugin. The customization was done, but the problem now is to make the file removal button, not interfere with other inputs of the same type, if any on the screen. With only one input, it works very well, but when adding more inputs, the validation of the remove button (if you have not selected file it does not appear, if a file is selected it appears), only works for the first input, in the other it does not take.
Below follows the code, I am doing a each to find the inputs Ids and pick them up to determine in which input the action is being carried out, so that there is no interference in other inputs:
function bs_input_file() {
$(".input-file").find('input').each(function (index, dom) {
var id = dom.id;
$("#" + id).parent().find("button.btn-reset").addClass("hidden");
$(".input-file").before(
function () {
if (!$(this).prev().hasClass('input-ghost')) {
var element = $("<input type='file' id='" + id + "' class='input-ghost' style='visibility:hidden; height:0'>");
element.attr("name", $(this).attr("name"));
element.change(function () {
element.next(element).find('input').val((element.val()).split('\\').pop());
});
$(this).find("button.btn-choose").click(function () {
element.click();
});
$(this).find("button.btn-reset").click(function () {
element.val(null);
$(this).parents(".input-file").find('input').val('');
bs_input_file();
});
$(this).find('input').css("cursor", "pointer");
$(this).find('input').mousedown(function () {
$(this).parents('.input-file').prev().click();
return false;
});
console.log(element)
return element;
}
}
);
$("#" + id).change(function () {
var element = $("#" + id);
if (element.val() != "") {
$("#" + id).parent().find("button.btn-reset").removeClass("hidden");
} else {
$("#" + id).parent().find("button.btn-reset").addClass("hidden");
}
})
})
}
bs_input_file();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h3>Example</h3>
<form method="POST" action="#" enctype="multipart/form-data">
<!-- COMPONENT START -->
<div class="form-group">
<div class="input-group input-file" name="Fichier1">
<input id="fileInput0" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group input-file" name="Fichier2">
<input id="fileInput1" type="text" class="form-control" placeholder='Select file...' />
<span class="input-group-btn">
<button class="btn btn-secondary btn-reset" type="button"><em class="glyphicon glyphicon-trash"></em></button>
<button class="btn btn-default btn-choose " type="button"><em class="glyphicon glyphicon-folder-open"></em> Search...</button>
</span>
</div>
</div>
<!-- COMPONENT END -->
</form>
</div>
</div>
In that part:
$("<input type='file' id='" + id + "'...you are creating elements with the same input text id. This gives problem even because an id should be unique, that is, you will always get the first one.– Sam
Shouldn’t it create systematically with the element reference ID? Since everything is within each?
– Douglas Teles
Look at the "inspect elements" and you will see that the input text and input file get the same id. That’s the problem.
– Sam
So, but this is expected even because the text and the file are related to the same input, the text works as a mask, if you look at the bottom in the other form-group it is the problem, it should have another ID
– Douglas Teles
I understood the purpose, but the two elements cannot have the same id.
– Sam
I get it, how I would solve this?
– Douglas Teles
In my view I would have to redo the code, I’m finding it polluted.
– Sam