CODEWITHSUNDEEP
jquery
Stig Kølbæk
Stig Kølbæk

Reputation: 474

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

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);
  }
}

Upvotes: 0

Views: 41

Answers (1)

mplungjan
mplungjan

Reputation: 178403

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!');
    }
  });
});

Upvotes: 1

Related Questions