I need to edit a class named "classroom" which has the attributes id, name, teacher and image. So far uploading and editing the images in the database is working, but in the edit page I would like to display the new image before clicking the update button. I have done something but nothing works if anyone can help me please.

The code of the view edit :

{% block title %}Edit Classe{% endblock %}

{% block body %}
    <h1>Edit Classe</h1>
                 {{ form_start(form) }}
                    {{ form_errors(form) }}

                    {{ form_row(form.nom) }}
                    {{ form_row(form.enseignant) }}
                    {{form_row(form.image)}}
            

                    <img id="output" src="{{ asset('img/course/small/'~ classe.image) }}" alt="course" class="card-img card-img-horizontal-lg sh-18 sw-lg-16 h-lg-100">

                        
                    {{ form_row(form.cours) }}
                {{ include('classe/_form.html.twig', {'button_label': 'Update'}) }}
        
                {{ form_end(form) }}

<script>
function file_changed(){
    var selectedFile = document.getElementById('input').files[0];
  var img = document.getElementById('img')

  var reader = new FileReader();
  reader.onload = function(){
  img.src = this.result}
  reader.readAsDataURL(selectedFile);
 }
</script>
     
    
{% endblock %}