Tengo el siguiente código Javascript, lo cual declaro 2 parámetros file_input, id. Como resultado obtengo, al subir una imagen el icono se pinta de color, si quito la imagen se quita el color del icono. Pero tengo un problema de que el length no esta definido, ¿Me pueden ayudar a resolver este problema?, Porfavor.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function detectFile(file_input, id) {
if (file_input.files.length > 0) {
$('#icon_upload' + id).addClass("green-text");
} else{
$('#icon_upload' + id).removeClass("green-text");
}
}
</script>
Html
<div class="col-12">
<input type="file" id="foto1" name="foto1" accept="image/png, .jpeg, .jpg, image/gif;capture=camera" class="input-foto" requered onchange="detectFile(this, 1)" value="{{foto1_ret}}" >
<label id="input_foto1" class="border rounded col-12 label-foto" for="foto1">
<i class="fa fa-camera-retro icon_base" id="icon_upload1"></i> Foto 1</label>
</div>
Dejo una Imagen igual del html.