skip to Main Content

Look at the HTML code below:

<div class="user-avatar-wrapper"> 
  <img class="profile-pic" src="/placeholder.png" alt="" />
  <div class="upload-button"></div>
  <input class="file-upload" type="file" accept="image/*"/>
</div>

Now I want to trigger the file upload and call to ajax on the click by .upload-button.

This is how I tried it in jQuery,

$(document).on('click', '.upload-button', function(e) {
  e.preventDefault();
  //$(".file-upload").click();
  $(this).next().trigger('click', function() {
    var $data = { 'title': 'Title', 'file': 'myfile' };
    $.ajax({
      type: 'POST',
      url: 'upload.php',
      data: $data,
        success: function(response) {     
      },
      error: function(response) {},
    });
  });
});

But, this code not working for me. That mean it didn’t send the ajax request.

Hope somebody may help me out.

2

Answers


  1. Your div is empty & doesn’t have any existence to run a function
    Try the below code:

    <div class="upload-button">&nbsp;</div>
    
    Login or Signup to reply.
  2. I think you’re mixing up a trigger with an event handler.
    When you click the div you should trigger a click on the file input but you don’t pass a callback there.
    You want to set up a change handler for the file input to make an ajax request when the file is selected with a change event handler.

    $(document).on('change', '.file-upload', function(e){
        var data = new FormData();
        data.append('title', 'Title');
        data.append('file', this.files[0]);
        $.ajax({
          type: 'POST',
          url: 'upload.php',
          data: data,
          processData: false,
          contentType: false,
          success: function(response) {     
          },
          error: function(response) {},
        });
        $(this).prev().html(`↑${this.files[0].name}`);
    });
    $(document).on('click', '.upload-button', function(e) {
      $(this).next().click();
    });
    .upload-button{
    cursor:pointer;
    }
    .file-upload{
    opacity:0.01
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="user-avatar-wrapper"> 
      <img class="profile-pic" src="/placeholder.png" alt="" />
      <div class="upload-button">↑</div>
      <input class="file-upload" type="file" accept="image/*"/>
    </div>
    <div class="user-avatar-wrapper"> 
      <img class="profile-pic" src="/placeholder.png" alt="" />
      <div class="upload-button">↑</div>
      <input class="file-upload" type="file" accept="image/*"/>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search