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.