Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gabriel27's avatar

Wire-elements/modal how to activate init js libraries like dropzone or any other elements?

I found this repo which creates modals.

The modal content is shown when a button is pushed and it is taken from a livewire component.

The content does not exist until then.

Because of this I do not know how to initialize the JS components like dropzone or select2,....

I am using TALL stack and all I found is that because the fields do not exist on load they are not instantiated.

For example the Dropzone component:

<div wire:ignore>
    <div class="dropzone" {{ $attributes }}></div>
</div>

@push('scripts')
    <script>
        Dropzone.options[_.camelCase("{{ $attributes['id'] }}")] = {
    url: "{{ $attributes['action'] }}",
    addRemoveLinks: true,
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size:  2 ,
      collection_name: "default"
    },
    success: function (file, response) {
		@this.addPhoto(response.photo)
    },
    init: function () {
        document.addEventListener("livewire:load", () => {
            let files = @this.mediaCollections["{{ $attributes['collection-name'] ?? 'default' }}"]
            if (files !== undefined && files.length) {
                files.forEach(file => {
                    let fileClone = JSON.parse(JSON.stringify(file))
                    this.files.push(fileClone)
                    this.emit("addedfile", fileClone)

                    if (fileClone.preview_thumbnail !== undefined) {
                        this.emit("thumbnail", fileClone, fileClone.preview_thumbnail)
                    } else {
                        this.emit("thumbnail", fileClone, fileClone.url)
                    }

                    this.emit("complete", fileClone)
                    if (this.options.maxFiles !== null) {
                        this.options.maxFiles--
                    }
                })
            }
        });
    },
    error: function (file, response) {
        file.previewElement.classList.add('dz-error')
        let message = $.type(response) === 'string' ? response : response.errors.file
        return _.map(file.previewElement.querySelectorAll('[data-dz-errormessage]'), r => r.textContent = message)
    }
}
    </script>
@endpush

The above will initialize perfectly in a normal form but not in the modal.

I also tried to re-emit a livewire:load event manually but it did not activate it.

Thank you.

0 likes
3 replies
leyduana's avatar

Since you are using TALL stack, you can use alpine and put your initialization logic inside the x-init

<div x-data x-init=
"
    Dropzone.options[_.camelCase("{{ $attributes['id'] }}")] = {
    url: "{{ $attributes['action'] }}",
    addRemoveLinks: true,
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    params: {
      size:  2 ,
      collection_name: "default"
    },
    success: function (file, response) {
		@this.addPhoto(response.photo)
    },
    init: function () {
        document.addEventListener("livewire:load", () => {
            let files = @this.mediaCollections["{{ $attributes['collection-name'] ?? 'default' }}"]
            if (files !== undefined && files.length) {
                files.forEach(file => {
                    let fileClone = JSON.parse(JSON.stringify(file))
                    this.files.push(fileClone)
                    this.emit("addedfile", fileClone)

                    if (fileClone.preview_thumbnail !== undefined) {
                        this.emit("thumbnail", fileClone, fileClone.preview_thumbnail)
                    } else {
                        this.emit("thumbnail", fileClone, fileClone.url)
                    }

                    this.emit("complete", fileClone)
                    if (this.options.maxFiles !== null) {
                        this.options.maxFiles--
                    }
                })
            }
        });
    },
    error: function (file, response) {
        file.previewElement.classList.add('dz-error')
        let message = $.type(response) === 'string' ? response : response.errors.file
        return _.map(file.previewElement.querySelectorAll('[data-dz-errormessage]'), r => r.textContent = message)
    }
}
"
 wire:ignore>
    <div class="dropzone" {{ $attributes }}></div>
</div>

I didn't test this code and you might need to make a few changes but this is what I do with my filepond and flatpickr components.

gabriel27's avatar

@leyduana thank you very much for your reply.

I tried your solution and probably because my knowledge about AlpineJS is not that good I could not make it work in the wire-elements/modal.

The component works perfectly if the element exists in DOM but in the popup I could not get it to initialize in the popup.

I have no error in the console or logs but it just does not initialize.

Still looking.

Please or to participate in this conversation.