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();
});