i am trying to drag and drop an mp3 file into a dropbox on my website. However, when i test it no matter what file i drop i keep getting the same error:

Uncaught TypeError: Cannot read properties of undefined (reading 'files')

This is the dropbox code (made using tailwind and vue):

<div @dragend.prevent.stop="isDragover = false" 
        @dragover.prevent.stop="isDragover = true" @dragenter.prevent.stop="isDragover = true" @dragleave.prevent.stop="isDragover = false" @drop.prevent.stop="upload($event)"
        class="w-[300px] h-[300px] text-gray-400 rounded-md border-2 border-dashed border-gray-300 transition duration-200 ease-linear hover:bg-green-500 hover:text-black" 
        :class="{'bg-green-500 text-black' : isDragover}">
            <p class="font-bold text-center mt-[40%]">Drop your files here</p>
        </div>

this is the method:

methods:{
    upload($event){
        this.isDragover = false;
        const files = [ ...$event.dataTranfser.files];
        files.forEach((file) => {
            if(file.type !== 'audio/mpeg'){
                return;
            }
            const storageRef = storage.ref();
            const songsRef =  storageRef.child(`songs/${file.name}`);
            songsRef.put(file);
        });
       
    },
},

After reading the file i am going to upload it to firebase however the error occurs on this line:

const files = [ ...$event.dataTranfser.files];

The file is somehow unidentified. Thanks for your help in advance