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

December 27, 2023 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);
  } elseif ($(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());
  } elseif ($(this).is('.upload')) {
    $(this).closest('form').submit();
    e.stopPropagation();
  } else {
    returnfalse;
  }
});

$('body').tooltip({
  selector: '.tip'
});

i.tip.btn:hover {
  color: #fff;
  background: #000;
  cursor:pointer;
}

<!DOCTYPE html><html><head><title>Test Case</title><metacharset="utf-8"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://use.fontawesome.com/releases/v5.8.2/css/all.css"rel="stylesheet"crossorigin="anonymous"></head><body><mainclass='container'><formid='box'class='input-group form-row'method='post'enctype="multipart/form-data"><labelclass='input-group-prepend'for='image'style='display:block;min-height:120px'><figureclass='input-group-text'style='min-height:100%'><iclass="btn btn-light fa fa-camera tip"title='Select an image or video file'></i>&nbsp;&nbsp;&nbsp;<imgclass="preview"width="100"height="100">&nbsp;&nbsp;&nbsp;<figcaption>&nbsp;</figcaption></figure></label><inputid='image'name='image'class="file"type="file"data-count="0"style="display: none;"><sectionclass=' input-group-append'style='max-height: 120px'><fieldsetclass='btn-group-vertical'style='min-height: 100%'><buttonclass='upload btn btn-primary btn-sm'type='button'style='min-height: 50%'form='box'>Upload</button><buttonclass='reply btn btn-secondary btn-sm'type='button'style='min-height: 50%'>Reply</button></fieldset></section></form></main><scriptsrc='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><scriptsrc="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>

JavaScript Lib

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

Solution 1:

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