CODEWITHSUNDEEP
jqueryformsfileinput
Max
Max

Reputation: 37

How can I prevent an event entering in an infinite loop?

I inserted buttons, taken from mdbootstrap, to load cv and cover letter, I hide the two input fields and connected jquery for clicking on a given element to act on the true input for opening the loading window. The problem is that if I use the directive .on('click', ...) it enters an infinite recursive cycle, while if I use .one ("click", ...) it only executes once, thus preventing all the users to reopen the upload (ex: load the wrong file).
Please help on above query Following is the HTML, CSS, JS code.

<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>  

<!-- Jquery 3.4.0 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   

<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>

.file-field,
.carica_cv,
.carica_lettera {
  cursor: pointer;
}

input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
}

input[type="file"]#cv {
  background-color: lime;
  left: 63%;
}

input[type="file"]#lettera {
  background-color: red;
  left: 80%;
}

$(document).ready(function () {
   $("#carica_cv").on("click", function () {
      //alert("Curriculum");
      $('#cv').click();
   })

   $(".carica_lettera").one("click", function () {
      alert("Lettera");
      $('#lettera').click();
   })



//Add file name to label(Show file names under the buttons, on the left) 
       $("#lettera").change(function () {
          $("#nome-lettera").text(this.files[0].name);
       });

       $("#cv").change(function () {
          $("#nome-cv").text(this.files[0].name);
       });

    })

Is the code to show the file name right?

Upvotes: 1

Views: 192

Answers (1)

epascarello
epascarello

Reputation: 207511

You can just use labels and not need any JavaScript code. 

<div class="form-group col-lg-12">
   <div>
      <label for="cv" class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </label>
   </div>
   <div>
      <label for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </label>
   </div>
   <div>
   </div>
</div>

If you really want to use JavaScript to click you need to see what was clicked. If it is an input, ignore it. 

$(".file-field").on("click", function (e) {
  const isInput = $(e.target).is("input")
  if (!isInput) {
    $(this).find("input").click()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-lg-12">
   <div>
      <div class="file-field" id="carica_cv">
         <div class="btn blue-gradient btn-sm float-left">
            <i class="fas fa-cloud-upload-alt mr-2" aria-hidden="true"></i>
            <span>Carica il tuo Curriculum Vitae</span>
            <input name="cv" id="cv" type="file"/>
         </div>
      </div>
   </div>
   <div>
      <div for="lettera" class="file-field carica_lettera">
         <div class="btn blue-gradient btn-sm float-left">
            <span>
            <i class="fas fa-cloud-upload-alt mr-2 carica_lettera" aria-hidden="true"></i>
            Carica Lettera di Presentazione
            <input name="lettera" id="lettera" type="file">
            </span>
         </div>
      </div>
   </div>
   <div>
   </div>
</div>

Upvotes: 1

Related Questions