Filament•12mo ago

how can i put script on a widget blade view?

i am going to have a widget that will run a script on its view. but no matter where I put the script it didnt work. here's my code: <x-filament-widgets::widget> <x-filament::section> </x-filament::section> <script> alert("hey") </script> </x-filament-widgets::widget> any idea why? thanks. this is a custom widget btw and i am using it on a custom page

11 Replies

LeandroFerreira•12mo ago

<div x-data="{
    init() {
        alert('hey')
    }
}"></div>

<div x-data="{
    init() {
        alert('hey')
    }
}"></div>

https://alpinejs.dev/

Alpine.js

A rugged, minimal framework for composing behavior directly in your markup.

MaseaOP•12mo ago

@Leandro Ferreira thanks for the response. this is my script though:

 document.addEventListener('alpine:init', () => {
            Alpine.data('uploadForm', () => ({
                files: @entangle('filePreviews'),
                buttonDisabled: false,
    
                selectFile(event) {
                    this.files = []
                    buttonDisabled = true
    
                    const filesToUpload = event.target.files.length
                    let filesLoaded = 0
    
                    for (const file of event.target.files) {
                        buttonDisabled = true
                        const reader = new FileReader()
    
                        reader.readAsDataURL(file)
    
                        reader.onload = () => {
                            this.files.push(reader.result)
                            
                            if (filesLoaded === filesToUpload) {
                                this.buttonDisabled = false // Enable the button when all files are loaded
                            }
                        }
                    }
                },
    
                removeFile(index) {
                    this.files.splice(index, 1)
                }
            }))
        })

 document.addEventListener('alpine:init', () => {
            Alpine.data('uploadForm', () => ({
                files: @entangle('filePreviews'),
                buttonDisabled: false,
    
                selectFile(event) {
                    this.files = []
                    buttonDisabled = true
    
                    const filesToUpload = event.target.files.length
                    let filesLoaded = 0
    
                    for (const file of event.target.files) {
                        buttonDisabled = true
                        const reader = new FileReader()
    
                        reader.readAsDataURL(file)
    
                        reader.onload = () => {
                            this.files.push(reader.result)
                            
                            if (filesLoaded === filesToUpload) {
                                this.buttonDisabled = false // Enable the button when all files are loaded
                            }
                        }
                    }
                },
    
                removeFile(index) {
                    this.files.splice(index, 1)
                }
            }))
        })

any idea how can i squeze this one to one of my elements just like you did? i'd rather just put this whole code into a script tag and do x-data="uploadForm" but apparently by script tag doesnt work..

LeandroFerreira•12mo ago

@script
<script>
    //...
</script>
@endscript

@script
<script>
    //...
</script>
@endscript

MaseaOP•12mo ago

well yeah script works now but my form element doesnt seem to find Alpine.data('uploadForm') This is my use case: <form x-data="uploadForm" wire:submit="uploadFiles" enctype="multipart/form-data"> This worked all fine until i put it inside the widget I removed " document.addEventListener('alpine:init', () => {" part and it worked. Would you suggest this? @Leandro Ferreira now suddenly it doesnt work anymore can you help me? @Leandro Ferreira

LeandroFerreira•12mo ago

hum, not sure why

MaseaOP•12mo ago

Bro please try to help me i need to make this ready for tomorrow

LeandroFerreira•12mo ago

Your first question was: How can I put the script? I showed you a way to do it. If your code suddenly stops working, I don't know why 😅 . You should debug it to understand what is happening.

MaseaOP•12mo ago

Thank you! How should i approach debugging alpine variables though? I clearly declare the variabke but alpine cant read it somehow

LeandroFerreira•12mo ago

I mean, check the code step by step to understand what is happening..

MaseaOP•12mo ago

This is inside a modal, I presume that's not about it though Okay thanks it was a form element inside another element, that was the reason facepalm

madhrnek•11mo ago

Hi, I need help with uploading a file to a folder with a custom path. I would also like to store more information about the file such as size, disk used, mimetype, how can I map the data to be stored in the database for UploadFile? I have tried via action, but I would like to do it directly from the form: Tables\Actions\Action::make('upload_file')->label('Upload File') ->mutateFormDataUsing(function (array $data): array { $data['folder_id'] = $this->ownerRecord->id; $data['user_id'] = $this->ownerRecord->id; $data['disk'] = env('FILESYSTEM_DISK', 'public'); return $data; }) ->action(function (array $data, UserFolder $folder): void { $file = UserFile::create($data); $file->folder_id = $folder->id; $file->mimetype = Storage::disk('public')->mimeType($data['path']); $file->filesize = Storage::disk('public')->size($data['path']); $file->save(); }) ->form([ Forms\Components\TextInput::make('name')->required(), FileUpload::make('path') ->storeFileNamesIn('file_name') ->directory('/users/' . $this->ownerRecord->id . '/folders') ])

Gaming

Programming

how can i put script on a widget blade view?