It seems like you're encountering issues with Alpine.js not being able to find the dragDrop function when the Livewire component is loaded dynamically. This can happen because the script may not be evaluated when the component is dynamically inserted into the DOM.
To solve this, you can ensure that the JavaScript function is globally available before the Livewire component is initialized. You can do this by including the JavaScript function in your main layout file or in a separate JavaScript file that is loaded when the page loads.
Here's how you can modify your code to make the dragDrop function globally available:
- Move the
dragDropfunction into a separate JavaScript file or a<script>tag in your main layout. For example, create a new file calleddrag-drop.js:
window.dragDrop = function() {
return {
uploadProgress: 0,
dragover() {
// alert('Dragged over');
},
dragleave() {
// alert('Drag leave');
},
drop(e) {
// alert('Dropped');
if (e.dataTransfer.files.length > 0) {
const files = e.dataTransfer.files;
this.uploadFiles(files);
}
},
uploadFiles(files) {
this.uploadProgress = 0; // Reset?
// Note: You'll need to handle the Livewire upload logic here.
}
};
};
- Include this file in your main layout so that it's loaded when the page loads:
<script src="/path/to/drag-drop.js"></script>
- In your Livewire component, you can now reference the
dragDropfunction without needing to define it within the component itself:
<div x-data="dragDrop()" class="col-md-12 mb-2">
<!-- ... -->
</div>
By doing this, the dragDrop function is defined on the window object and is available globally, which means it should be accessible to Alpine.js when your Livewire component is dynamically loaded.
Remember to handle the Livewire file upload logic appropriately, as the @this.uploadMultiple directive you have in your original code is specific to Livewire and needs to be integrated with the JavaScript function in a way that Livewire can process the file uploads. You may need to use Livewire's JavaScript API to trigger file uploads from your Alpine.js component.