Luuk Luuk - 14 days ago 4
HTML Question

JavaScript detect change on appended file input

I generated a form when a user presses a button with this code:

var sql = "SELECT * FROM categories WHERE ID = " + id;
var result = db.query(sql, {json:true});
var obj = JSON.parse(result);
var parsedlength = arrLenght(obj);

var main = document.getElementById('main');
var modal = document.createElement('div');

for(var i = 0; i < parsedlength; i++) {
var object = obj[i];
for (var key in object) {
if(object.hasOwnProperty(key)) {
modal.className = 'modal fade bd-example-modal-lg';
modal.id = "editModal";
modal.role = "dialog";
modal.innerHTML = '<div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="deleteElement(\'editModal\')">'+
'<span aria-hidden="true">&times;</span>'+
'</button>'+
'<h4 class="modal-title">Bewerken van categorie: ' + object['ConName'] + '</h4>'+
'</div>'+
'<div class="modal-body" style="background-image: url(\'' + object['img'] + '\')">'+
'<div class="row">'+
'<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Naam:</label>'+
'<div class="col-md-12 col-xs-12">'+

'<input class="form-control" type="text" value="' + object['ConName'] + '" placeholder="Categorie" id="cat-name" name="cat-name">'+
'</div>'+
'<label for="cat-name" class="col-md-12 col-xs-12 col-form-label">Afbeelding:</label>'+
'<div class="col-md-9 col-xs-12">'+
'<input type="text" name="cat-path-show" id="cat-path-show" class="form-control" placeholder="afbeelding" readonly>'+
'<input type="file" name="cat_path_update" id="cat-path-update" style="position: absolute; top:-10000px;">'+
'</div>'+
'<div class="col-md-3 col-xs-12"><button id="update-cat-img" class="btn btn-info" onclick="updateList()">afbeelding kiezen</button></div>'+
'</div>'+
'</div>'+
'<div class="modal-footer">'+
'<div class="btn-group">'+
'<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteElement(\'editModal\')">Annuleer</button>'+
'<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCatEdit();deleteElement(\'editModal\')">Opslaan</button></div>'+
'</div>'+
'</div>'+
'</div>';
}
}
window.setTimeout(function() {
main.appendChild(modal);
$('#editModal').modal('show')
}, 100);
object = null;
var obj = null;


as you can see, there is a button called "afbeelding kiezen", with an ID of "update-cat-img" that triggers the function
updateList()
this function clicks on the file input. the problem is detecting the change event, because the form is appended after the entire page is loaded, I can't add an
addEventListener
, listening for the file input value to change.

this is what I've tried, but ofcourse, it doesn't work.
how would I be able to change the value of
fileView
to the value of
file
when the value of
file
is changed?

function updateList() {
var file = document.getElementById('cat-path-update');
var fileView = document.getElementById('cat-path-show');
file.click();
file.addEventListener('change', function() {
m();
fileView.value = file.value;
}, false);
m(file.value);

}

Answer

Be sure to add the change event before the call. Here is an example:

//HTML-Template
var tHTML = (function(){/*
    <div>
        <div><span id = 'sName'>-</span></div>
        <div><input id = 'inFile' name = 'inFile' type = 'file' /></div>
    </div>
*/}).toString().split('/*').pop().split('*/')[0].trim();

//Append HTML
document.body.innerHTML += tHTML;

//Add change event
var tF = document.querySelector('#inFile');
tF.onchange = function(){
    if(this.files && this.files.length){
        var tS = document.querySelector('#sName');
        tS.textContent = this.files[0].name
    }
};

//Execute
tF.click();