I am adding a button to each image with jQuery preview. How can I operate the buttons?

I can preview many images without any problem. But I don't know how I can get the value of the image clicked on the upload section and send it with ajax?

HTML:

<div>
  <input type="file" name="file[]" id="images" multiple />
</div>
    
<ul id="prewiew">
    
</ul>

JavaScript:

$(document).ready(function () {

  $('#images').on('change', function (e) {

    //It prints the added pictures one by one on the page with a loop.
    var files = e.target.files;

    $.each(files, function (i, file) {

      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {

        var template = '<li>' +
          '<img src="' + e.target.result + '" width="50" height="50"> ' +
          '<label>' + file.name + file.size + '</label> <input type="text" name="title">' +
          ' <button  class="btn btn-sm btn-info upload">Yükle</button>' +
          '</li>';

        $('#prewiew').append(template);
        $('#resim').val('');
      };

    });

  });

  $(document).on('click', '.upload', function () {

    //How can I receive and transfer data when the button is clicked? 

    var file = $(this).closest('img');
    var data = new FormData();
    data.append('ImageFile', file);

    $.ajax({
      url: '/Home/ImagePost/',
      type: 'POST',
      data: data,
      contentType: false,
      processData: false,
      success: function () {

      },

    });

  });

Summary: I am previewing multiple images. I want to send the previewed picture by pressing the upload button.

The part that's missing is the file object, which is needed when sending the image file.

If you maintain the array of files with a global reference, then you will have access to the necessary file object when sending.

The only other thing needed is to associate the button with its corresponding file object.

// CHANGE: declare `files` as a global here:
let files;
// end CHANGE

$(document).ready(function () {
  
   $('#images').on('change', function (e) { 

       //It prints the added pictures one by one on the page with a loop.
       files = e.target.files;
               
        $.each(files, function (i, file) {        
                 
           var reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onload = function (e) {
                        
           // CHANGE: add a `data-fileindex` attribute to the button
           // to associate button with its file object
           var template = '<li>' +
           '<img src="' + e.target.result + '" width="50" height="50"> ' +
           '<label>' + file.name + file.size + '</label> <input type="text" name="title">' +
           '<button ' +
           '   class="btn btn-sm btn-info upload"' +
           '   data-fileindex="' + i + '">' +
           'Yükle</button>' +           
           '</li>';
           // end CHANGE

           $("#prewiew").append(template);
           $("#resim").val('');
        }

      });
              
 });

Then the click handler can access the appropriate file object:

document.onclick = function (evt) {
  const button = evt.target;
  const iFile = Number(button.dataset.fileindex);
  const file = files[iFile];

  // using `file`, perform POST below
};

For details on how to upload a file with ajax, see the existing How can I upload files asynchronously?