Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery

Replacing Choose File With Font Awesome Icon Makes Cloned Image Preview Inoperable

Post a Comment
Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message. The imag

Solution 1:

  • Use a label and assign it [for] attribute with the value of the input id:

    <label for='upload'></label>
<input id='upload' type='file'>

    When the label is clicked then the input that it is associated with is as well.

  • Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).

      $('main').on('click change', '.file, .upload, .reply', function(e) {...

  • Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.

  • 99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo). 

let count = 0;

$('main').on('click change', '.file, .reply, .upload', function(e) {
  if ($(this).is('.reply')) {
    ++count;
    const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>&nbsp;&nbsp;&nbsp;<img class="preview" width="100" height="100">&nbsp;&nbsp;&nbsp;<figcaption>&nbsp;</figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
    $('main')[0].insertAdjacentHTML('beforeend', htmlString);
  } else if ($(this).is('.file')) {
    $(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
    $(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
  } else if ($(this).is('.upload')) {
    $(this).closest('form').submit();
    e.stopPropagation();
  } else {
    return false;
  }
});

$('body').tooltip({
  selector: '.tip'
});
i.tip.btn:hover {
  color: #fff;
  background: #000;
  cursor:pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test Case</title>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body>

  <main class='container'>

    <form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
      <label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
        <figure class='input-group-text' style='min-height:100%'>
          <i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>&nbsp;&nbsp;&nbsp;
          <img class="preview" width="100" height="100">
          &nbsp;&nbsp;&nbsp;
          <figcaption>&nbsp;</figcaption>
        </figure>
        </label>
      <input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
      <section class=' input-group-append' style='max-height: 120px'>
        <fieldset class='btn-group-vertical' style='min-height: 100%'>
          <button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
          <button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
        </fieldset>
      </section>
    </form>

  </main>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    <!--This is where the jQuery/JavaScript would be placed-->
  </script>
</body>

</html>

Post a Comment for "Replacing Choose File With Font Awesome Icon Makes Cloned Image Preview Inoperable"