Apending data about image in to UL List jQuery

Question

I have a list and for each li record I need to attach image, for this I have a function

The problem is, when I tap i to add img it's opening window and i upload image, then i get URL image and name, this url and name i should have in list.

In this moment the script is adding in-to list, but with duplicating previous values.

JSfiddle

$(document).on("click", ".attach-img", function() {
  $('#imgupload').click();
  $("input[type='file']").on('change', (event) => {
    value = event.target.files[0].name;
    console.log(event.target.files[0].name)

    var imageLink = `<a href="${window.URL.createObjectURL(event.target.files[0])}" target="_blank">${value}</a>`
    $(this).parent().find(".file-name").append(imageLink)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Tets 1 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">

</ul>
<ul>
  <li>Tets 2 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
</ul>
<ul>
  <li>Tets 3 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 4 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 5 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 6 <span class='attach-img'>add img</span>
<p class='file-name'></p></li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
  
</ul>

You are using duplicate IDs `imgupload`. Which might cause problems. ANother thing is that you search for `.file-name` but `file-name` for `test-6` is not in the same place as for the others. — Mihai T, Feb 04 '20 at 09:30
@MihaiT this ```imgupload`` id i just use for opening window with chosing file — Andrew, Feb 04 '20 at 09:32
@Andrew `id` should always be unique each dom element. anyway, I've updated the fiddle. have a look — Muhammad Usman, Feb 04 '20 at 09:53

score 0 · Answer 1 · answered Feb 04 '20 at 09:52

0

There are many things wrong in here. First of all, id should be unique for every element of the DOM.

Secondly, all of the html elements that are being generated dynamically should follow the same html structure if you want to be able to access them using the same logic.

Moreover, here is the updated fiddle

Fiddle

answered Feb 04 '20 at 09:52

Muhammad Usman

10,039
22
39

_but with duplicating previous values._ is it ? – Muhammad Usman Feb 04 '20 at 10:06
No, for now when i upload pictures, it's copie for each i row – Andrew Feb 04 '20 at 10:06
are you testing the fiddle ? or just copying the `js` and replacing it with your js code ? – Muhammad Usman Feb 04 '20 at 10:08
I test it, and then i copie js, in fiddle it's working – Andrew Feb 04 '20 at 10:09
Nope, again some problem – Andrew Feb 04 '20 at 10:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207166/discussion-between-george-bailey-and-andrew). – Muhammad Usman Feb 04 '20 at 10:13

Apending data about image in to UL List jQuery

1 Answers1