Trying to drag and drop an mp3 file into a dropbox on my website is proving challenging. Each time I test it, no matter the file I drop, the same error persists:
Uncaught TypeError: Cannot read properties of undefined (reading 'files')
Below is the code for the dropbox (created 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 that's causing issues:
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);
});
},
},
The error arises when trying to read the file before uploading it to firebase:
const files = [ ...$event.dataTranfser.files];
The file seems to be unidentified. Appreciate any help on this matter in advance.