JQuery: need to hide div if input file is empty

Question

I need to hide a div for aditional coments if the input file is empty.

I don't mind if it's done with Jquery or plain Javascript.

I've used JQuery, I know that it's been called correctly because my alert pops up, but my function does not hide the div with ID: #instrucciones-adicionales and all its contents.

HTML:

            <script>
                alert( "Animation complete." );
                $(function () {
                    $("input:file").change(function () {
                        var fileName = $(this).val();
                        if (filename != "") {
                            $("#instrucciones-adicionales").hide();
                        } //show the button
                    });
                });
            </script>


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


 </br>
 </br>

 <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


  <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>

Answer 1

1. You had a typo (variables are case sensitive - fileName !== filename).
2. I added the show part:

alert( "Animation complete." );
$(function () {
    $("input:file").change(function () {
        var fileName = $(this).val();
        if (fileName != "") {
            $("#instrucciones-adicionales").hide();
        } else {
            $("#instrucciones-adicionales").show();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">


    <form method="post" enctype="multipart/form-data">
       <input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">

    <div class="form-group">

       <div id="div_id_imagenes" class="form-group">

            <label for="id_imagenes" class="col-form-label  requiredField">
                Imagenes<span class="asteriskField">*</span>
            </label>


                <div class="">
                    <input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">

                </div>


    </div>

      <div id="instrucciones-adicionales" style="display: none">

           <p class="bold-font"> Instrucciones adicionales (opcional):</p>


   <div id="div_id_instrucciones" class="form-group">
      <label for="id_instrucciones" class="col-form-label  requiredField">
                    Instrucciones<span class="asteriskField">*</span>
                </label>




       <div class="">
           <textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
    </textarea>


    </div>


 </div>





  </div>
 </div>


                        </br>
                        </br>

                        <p>O, sáltate este paso y envía tu arte por correo electrónico</p>


                        <button type="submit" class="btn btn-naranja text-white btn-block">Continuar
                        </button>


                    </form>

</main>