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

Question

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.

Break this down into smaller tasks. Do you know how to upload an image with ajax? If not research that. Do you know how to get the file index of the button clicked? If not, research that. When you are having issues with a specific step ask questions then about that step. Your whole question is currently far too broad per guidelines in the [help] — charlietfl, Dec 27 '20 at 19:13

terrymorse · Accepted Answer · 2020-12-27T20:20:20.043

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?

e.target.result returns the path of the picture data: image / jpeg; base64, / 9j... can't post this part. I already have the problem here. If the data comes from the database, I can keep it on the id, but since we previewed through the api, I could not find what to get when clicking. — Slmo, Dec 27 '20 at 19:37
@Slmo - I see now that you need the `file` object in order to send the file. I'll change my answer to reflect that. — terrymorse, Dec 27 '20 at 19:44
I can access the data as I want. Thank you for your interest and relevance. Thanks for your effort. — Slmo, Dec 27 '20 at 21:10

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

1 Answers1