How can i make progress bar for livewire function execution in laravel

user_13845061 0
Viewed 3494

I Want Make a Progress Bar For My Live Wire Function Progress. When i Use wire:loading i can just show spinning icon o another text like "uploading ..." , now how can i make progress bar for that ?

I was found it in live wire documentation but not work for show function execution :

<script>
        document.addEventListener('livewire:load',() => {
            let progressSection = document.querySelector('#progressbar'),
                progressBar = progressSection.querySelector('#progress-fill');

            document.addEventListener('livewire-upload-start' , () => {});
            document.addEventListener('livewire-upload-finish' , () => {});
            document.addEventListener('livewire-upload-error' , () => {});
            document.addEventListener('livewire-upload-progress' , (event) => {
                progressSection.style.display = "block";
                console.log(`${event.detail.progress}%`);
                progressBar.style.width = `${event.detail.progress}%`;
            });
        });
        
</script>

in the live wire component i was upload file to my ftp server and i want show uploading percentage of file in front end , when i run the upload method.

thanks very much

laravel-livewire laravel
1 Answers

I had to use Alpine as well for show/hide purpose and plus it binds well with livewire.

Below is an example for uploading resume.

<form wire:submit.prevent="uploadResume">

<div x-data="{ isUploading: false, progress: 0 }" 
     x-on:livewire-upload-start="isUploading = true"
     x-on:livewire-upload-finish="isUploading = false" 
     x-on:livewire-upload-error="isUploading = false"
     x-on:livewire-upload-progress="progress = $event.detail.progress">
    
    <input type="file" id="resume" wire:model="resume" aria-label="Resume" />

    <div class="mt-2" x-show="isUploading">
        <progress max="100" x-bind:value="progress"></progress>
    </div>
</div>

</form>

use Livewire\WithFileUploads;

class Upload extends Component
{
    use WithFileUploads;

    public function uploadResume()
    {
        // upon form submit, this function till fill your progress bar
    }
}
user_53261910
Related