Materializecss, change icon after attaching image in input file

Question

I’m using materializecss to make a form.

I would like help to make the once the image is attached, change that icon:

It would just change the icon of:

<i class="material-icons">camera_alt</i>

for

<i class="material-icons">check</i>

var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".div-wrap"); //Fields wrapper
var add_button = $("#btn-wrap"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
  e.preventDefault();
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    $(wrapper).append('<div class="row"><div class="col s9"><div class="bg-branco"><input name="avariaNome[]" type="text" placeholder="Referencia"></div></div><div class="col s2"><div class="file-field input-field" style="margin-top: 0rem !important;"><div class="btn" style="height: 62px;"><span><i class="material-icons">camera_alt</i></span><input name="avariaFoto[]" type="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="hidden"></div></div></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
  }
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
  e.preventDefault();
  $(this).parent('div').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



<div class="row">
  <div class="col s12">
    <a id="btn-wrap" class="waves-effect btn-large margin-b-1 orange">+ Fotos</a>
  </div>
</div>

<div class="row">
  <div class="col s9">
    <div class="bg-branco">
      <input name="avariaNome[]" type="text" placeholder="Referencia">
    </div>
  </div>

  <div class="col s2">
    <div class="file-field input-field" style="margin-top: 0rem !important;">
      <div class="btn" style="height: 62px;"><span><i class="material-icons">camera_alt</i></span>
        <input name="avariaFoto[]" type="file">
      </div>

      <div class="file-path-wrapper">
        <input class="file-path validate" type="hidden">
      </div>
    </div>
  </div>
</div>

<!-- .div-wrap Cria as novas linhas para inserssão de fotos -->
<div class="div-wrap"></div>

Answer 1

Use a Event Handler which changes the icon (changes the text) which is in the same div of the input file:

$(document).on("change", "[name='avariaFoto[]']", function(){
   $(this) // input alterado
   .closest("div") // busca a div mãe
   .find(".material-icons") // busca o ícone
   .text(this.value ? 'check' : 'camera_alt'); // se o campo tiver valor muda pra check
});

Testing:

I took the class .btn of a div because it was blocking the input file here in the snippet.

$(document).on("change", "[name='avariaFoto[]']", function(){
   $(this).closest("div")
   .find(".material-icons")
   .text(this.value ? 'check' : 'camera_alt');
});

var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".div-wrap"); //Fields wrapper
var add_button = $("#btn-wrap"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
  e.preventDefault();
  if (x < max_fields) { //max input box allowed
    x++; //text box increment
    $(wrapper).append('<div class="row"><div class="col s9"><div class="bg-branco"><input name="avariaNome[]" type="text" placeholder="Referencia"></div></div><div class="col s2"><div class="file-field input-field" style="margin-top: 0rem !important;"><div class="xbtn" style="height: 62px;"><span><i class="material-icons">camera_alt</i></span><input name="avariaFoto[]" type="file"></div><div class="file-path-wrapper"><input class="file-path validate" type="hidden"></div></div></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
  }
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
  e.preventDefault();
  $(this).parent('div').remove();
  x--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



<div class="row">
  <div class="col s12">
    <a id="btn-wrap" class="waves-effect btn-large margin-b-1 orange">+ Fotos</a>
  </div>
</div>

<div class="row">
  <div class="col s9">
    <div class="bg-branco">
      <input name="avariaNome[]" type="text" placeholder="Referencia">
    </div>
  </div>

  <div class="col s2">
    <div class="file-field input-field" style="margin-top: 0rem !important;">
      <div class="xbtn" style="height: 62px;"><span><i class="material-icons">camera_alt</i></span>
        <input name="avariaFoto[]" type="file">
      </div>

      <div class="file-path-wrapper">
        <input class="file-path validate" type="hidden">
      </div>
    </div>
  </div>
</div>

<!-- .div-wrap Cria as novas linhas para inserssão de fotos -->
<div class="div-wrap"></div>