Not able to see the preview of the image in filepond

I am trying to use filepond to upload some images. The upload works properly. I also would like to see the preview of the images on upload. I have tried to use the plugin but apparently, I see no change.

{% block style %}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">
 {% endblock %}

The below are my scripts

{% block scripts %}
</script>
<!-- FILE POND STUFF -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
FilePond.parse(document.body);
</script>
{% endblock %}

This is my JS file

$('#file_upload').change(function() {
    const inputElement = document.querySelector('input[type="file"]');

    FilePond.registerPlugin(FilePondPluginImagePreview);

    const pond = FilePond.create( inputElement, {
    allowMultiple: true,
    allowFileEncode: true,
  });

}

My HTML code

<input type="file" name='file' class='filepond' multiple  id='file_upload'/>

I am not able to figure out if there are any additional steps to this.