What is the correct way to check if an input file element changes in jQuery?

Question

The below two jQuery scripts are similar, but #1 reacts on checkbox change (This is working), but I need a function to do the same when a <input type="file"> element has changed (file been choosen), and have tried to accomblish this in #2, but I am not able to get it to react.

What is the correct way to accomplish this?

1. Working with checkbox:

$(function() {
   $(':checkbox').on( 'change', function() {
      if( $(':checkbox:checked').length == <%=NumOfCheckBoxes%> ) {
         $('button.next').prop( 'disabled', false );
         $('button.next').addClass("btn-success");
         $('button.next').html('Save your settings <i class="far fa-save"></i>');
      } else {
         $('button.next').prop( 'disabled', true );
         $('button.next').removeClass("btn-success");
         $('button.next').html('You need to check all checkboxes to enable this!');
      }
   });

2. Script tried for file input element:

     $(function() {       
       $(':file').on( 'change', function() {
        if(document.getElementById("ProfileInputSelector").value != "") {   
             $('button.next').prop( 'disabled', false );
             $('button.next').addClass("btn-success");
             $('button.next').html('Upload picture <i class="far fa-save"></i>');
          } else {
             $('button.next').prop( 'disabled', true );
             $('button.next').removeClass("btn-success");
             $('button.next').html('Choose image to enable this!');
          }
       });   
    });

Updated with Snippet as asked:

$(function() {
  $(':file').on('change', function() {
    if (document.getElementById("ProfileInputSelector").value != "") {
      $('button.next').prop('disabled', false);
      $('button.next').addClass("btn-success");
      $('button.next').html('Upload profil billede for <%=objGetEmployeeName("FullName")%> <i class="far fa-save"></i>');
    } else {
      $('button.next').prop('disabled', true);
      $('button.next').removeClass("btn-success");
      $('button.next').html('Vælg Billede ovenfor for at kunne klikke her!');
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<input type="file" class="inputfile inputfile-4" accept="image/jpeg" onchange="importFileandPreview()">
<br>
<button type="submit" formaction="insert_confirm_tasks_solved.asp" id="UploadPrifileButton" class="next btn btn-secondary shadow-custom" disabled>Upload Profil billede for NAME</button>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Script that onchange="importFileandPreview()" uses:

function importFileandPreview() {
  var preview = document.querySelector('#ProfilePic');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
    document.getElementById('srcAttribute').value = preview.src.substring();
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

Please click edit, the [<>] snippet editor and provide a minimal reproducible example so we can se the behaviour in your page — mplungjan
– mplungjan, Commented Apr 24, 2021 at 18:54
@mplungjan I have just updated with a snippet .. When I made the snippet my attention came to the onchange="importFileandPreview()" in the file input, and I think that is the cause to the script not working, but that OnChange is calling another crucial function , so I really need that .. how can I place that in the jQuery with the function side by side? — Stig Kølbæk
– Stig Kølbæk, Commented Apr 24, 2021 at 19:16
Just move the function from inline into the correct part of the if — mplungjan
– mplungjan, Commented Apr 24, 2021 at 19:27
@mplungjan I have just added the script that onchange="importFileandPreview()" calls below snippet. — Stig Kølbæk
– Stig Kølbæk, Commented Apr 24, 2021 at 19:28

mplungjan · Accepted Answer · 2021-04-24 19:33:55Z

1

Something like this. Why not use jQuery when you have it?

Also don't use the slim version of jQuery or we will have you here again when you try to ajax the file

function importFileandPreview() {
  const $preview = $('#ProfilePic');
  const file    = $('input[type=file]')[0].files[0];
  const reader  = new FileReader();

  reader.on("load", function () {
    $preview.attr("src",reader.result);
    $('srcAttribute').val(preview.src.substring()); // substring what?
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}


$(function() {
  $(':file').on('change', function() {
    if ($("#ProfileInputSelector").val() != "") {
      $('button.next').prop('disabled', false);
      $('button.next').addClass("btn-success");
      $('button.next').html('Upload profil billede for <%=objGetEmployeeName("FullName")%> <i class="far fa-save"></i>');
      importFileandPreview()
    } else {
      $('button.next').prop('disabled', true);
      $('button.next').removeClass("btn-success");
      $('button.next').html('Vælg Billede ovenfor for at kunne klikke her!');
    }
  });
});

answered Apr 24, 2021 at 19:33

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

Du er velkommen

Collectives™ on Stack Overflow

What is the correct way to check if an input file element changes in jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related