How to achieve a drag & drop file upload using livewire?

#1

I am trying to achieve a drag and drop file upload like dropzone using livewire (& AlpineJS). I am looking for pointers to that direction. Not found any documentation how to do it. Any help is greatly appreciated.

#2

Inspired by the solution for file upload How to make file upload work?,
I came up with the solution for drag and drop.

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

on the div where file is to be dropped.

then have a bit of javascript

window.livewire.on(‘file-dropped’, (event) => {

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

})

Seems to be working. I can now in the component dd the file data. Rest can be done now.

1 Like
#3

Any ideal about how to track file uploads progress?

#4

Since this example is using FileReader(), you can listen to the progress event and see what progress is being made. Look for the event.loaded and divide that by the size of your file. That should give you a percentage of file transferred.

#5

Okay, thanks will give that a try

#6

This is a awesome working script :metal:

https://f24aalam.medium.com/laravel-livewire-drag-n-drop-files-upload-using-alpinejs-37d5b80d3eb9