Filament•7mo ago

Using JS in a filament custom form component

Hello, What I am trying to do: Trying to run JS in filament custom form component What I did: I included script tags with console logs in the component but it never triggers i tried including the scripts using @push and directly but both did not work. My issue/the error: The Js is not triggering in filament custom component Code:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->

        <input type="file" id="directoryInput" wire:model="{{ $getStatePath() }}.folder[]"  webkitdirectory multiple>
        <div wire:loading wire:target="{{ $getStatePath() }}.folder[]">Uploading...</div>




    </div>
    <script>
        console.log("hello");
        document.addEventListener('livewire:load', function () {
            console.log("hello");

        })
        document.getElementById("directoryInput").addEventListener(
            "change",
            (event) => {
                var names = [];
                for (const file of event.target.files) {
                    names.push(file.webkitRelativePath);
                }

                console.log(names);

            },
            false,
        );
    </script>

</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->

        <input type="file" id="directoryInput" wire:model="{{ $getStatePath() }}.folder[]"  webkitdirectory multiple>
        <div wire:loading wire:target="{{ $getStatePath() }}.folder[]">Uploading...</div>




    </div>
    <script>
        console.log("hello");
        document.addEventListener('livewire:load', function () {
            console.log("hello");

        })
        document.getElementById("directoryInput").addEventListener(
            "change",
            (event) => {
                var names = [];
                for (const file of event.target.files) {
                    names.push(file.webkitRelativePath);
                }

                console.log(names);

            },
            false,
        );
    </script>

</x-dynamic-component>

1 Reply

LeandroFerreira•7mo ago

You should use alpinejs https://alpinejs.dev/start-here#building-a-counter

Start Here — Alpine.js

Gaming

Programming

Using JS in a filament custom form component