Blazor function for drag and drop

Trying to make a function in .razor file to be able to drag, drop and show the name of the .pdf, .png and .jpg files in the console. This is the element in HTML

<div class="bg-white flex flex-col items-center justify-center py-20 border border-slate-200 rounded-md relative" id="fileDropArea">
                    <img src="assetsAIDocReadericonsfile-upload-input.svg" alt="Icon for upload file" class="w-8">
                    <p>Drag & drop or <span class="text-tertiary">browse</span> your files</p>
                    <input type="file" accept=".pdf, .png, .jpg" class="absolute top-0 left-0 h-full w-full cursor-pointer opacity-0" id="fileInput"/>
                    <p id="fileName"></p>
                </div>

but I really don’t imagine how to do the function or which event to envoke because I’m just starting with blazor.

I tried to do a JavaScript function and insert it in the .razor file but didn’t quite work. I called it on the @onchange event of the input, but got several errors. This is the function

const fileInput = document.getElementById('fileInput');
const filenameContainer = document.getElementById('fileName');
const dropzone = document.getElementById('fileDropArea');

fileInput.addEventListener('change', function() {
    filenameContainer.innerText = fileInput.value.split('\').pop();
    console.log(fileInput.value);
});

['dragenter', 'dragover'].forEach(eventName => {
    dropzone.addEventListener(eventName, function() {
        dropzone.classList.add('bg-background');
    });
});

['dragleave', 'drop'].forEach(eventName => {
    dropzone.addEventListener(eventName, function() {
        dropzone.classList.remove('bg-background');
    });
});

// Prevent default behavior for drag events on the file input
fileInput.addEventListener('dragover', function(event) {
    event.preventDefault();
});

fileInput.addEventListener('drop', function(event) {
    event.preventDefault();
});