Using FilePond With Angular

<form (submit)="onSubmit($event)" method="POST">
    <file-pond #pondRef>
        <label for="my-files">Drop files here, or <u>browse</u> </label>
        <input id="my-files" name="my-files" type="file" required multiple />
    </file-pond>

    <button type="submit">Sumbit</button>
</form>

import { Component, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterOutlet } from '@angular/router';

// filepond imports
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';

@Component({
    selector: 'app-root',
    imports: [RouterOutlet],
    templateUrl: './app.html',
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
    @ViewChild('pondRef') pondRef!: ElementRef<FilePondElement>;

    async ngOnInit() {
        // defines <file-pond> element
        const elements = defineFilePond({
            locale,
        });
    }

    onSubmit(e: Event): void {
        e.preventDefault();

        console.log(this.pondRef?.nativeElement.entries);
    }
}

file-pond {
    margin: 1em 0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

file-pond u {
    cursor: pointer;
}