What is the purpose of the "onChange" function in the input field for the avatar upload?

The "onChange" function in the input field for the avatar upload is used to trigger an action whenever the value of the input field changes. This is commonly used to update the preview of the selected avatar image before it is uploaded. By using the "onChange" event, you can dynamically display the selected image to the user before they submit the form. 

<input type="file" id="avatar" name="avatar" onchange="previewAvatar(event)">
<img id="avatarPreview" src="#" alt="Avatar Preview" />

<script>
function previewAvatar(event) {
  var input = event.target;
  var reader = new FileReader();
  
  reader.onload = function(){
    var dataURL = reader.result;
    var preview = document.getElementById('avatarPreview');
    preview.src = dataURL;
  };
  
  reader.readAsDataURL(input.files[0]);
}
</script>

Keywords

onChange function input field avatar upload purpose

Related Questions