Estoy tratando de arrastrar y soltar un archivo mp3 en un buzón de mi sitio web. Sin embargo, cuando lo pruebo sin importar qué archivo descarto, sigo recibiendo el mismo error:

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

Este es el código de Dropbox (hecho usando Tailwind y 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>

este es el metodo:

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

Después de leer el archivo, lo subiré a firebase, sin embargo, el error ocurre en esta línea:

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

El archivo es de alguna manera no identificado. gracias por tu ayuda de antemano