Livewire File Uploads with Drag and Drop zones

I got file uploads to work in Livewire and that was quite an incredible experience.

Following along the documentation it just worked!

Now I want to create a dropzone to drag and drop the files. This seems pretty tough. I tried using this on my div:

wire:drop="$emit('file-dropped', $event)"

And then catching it with this:

window.livewire.on('file-dropped', (event) => {
                alert('file dropped');
                
                let files = event.dataTransfer.files;
                let fileObject = files[0];
                let reader = new FileReader();
                reader.onloadend = () => {
                        window.livewire.emit('file-upload', reader.result)
                    }
                reader.readAsDataURL(fileObject);
            });

            $('.drop').on('dragenter',function(event){
                event.preventDefault();
                $(this).html('drop now').css('background','blue');
            })
            $('.drop').on('dragleave',function(){
                $(this).html('drop here').css('background','red');
            })
            $('.drop').on('dragover',function(event){
                event.preventDefault();
            })
            	

Sorry for using jquery...

I get an alert but the file does not upload it just opens in the browser.