File
This prop is used to set the file of the component.
Structure
This prop has 3 required properties:
type
- The namespace of the prop.\LivewirePageBuilder\Props\File::class
label
- The label of the prop.File
default
- The default value of the prop.''
This prop has 2 optional properties:
rules
- The validation rules of the prop.['nullable', 'image']
accept
- The accept of the file.'application/pdf'
. By default, it will accept all file types.multiple
- Whether the file input should allow multiple files.false
.
This prop will render a file input field in the editor.
Return value
This prop will return an array of file data:
[
'disk' => 'public',
'path' => 'files/file.pdf',
]
// If multiple is true, it will return an array of file data:
[
[
'disk' => 'public',
'path' => 'files/file.pdf',
],
[
'disk' => 'public',
'path' => 'files/file2.pdf',
],
]
You can use the file data in the component by using the Storage
facade.
<img src="{{ Storage::disk($file['disk'])->url($file['path']) }}" />
// If multiple is true, you can loop through the files:
@foreach ($files as $file)
<img src="{{ Storage::disk($file['disk'])->url($file['path']) }}" />
@endforeach
Example
public static function getConfig(): array
{
return [
'name' => __('Custom Component'),
'description' => __('A custom component that can be used to display custom content.'),
'icon' => '/path/to/icon.svg',
'allow_children' => false,
'props' => [
'file' => [
'type' => \LivewirePageBuilder\Props\File::class,
'label' => __('File'),
'default' => '',
'rules' => ['nullable', 'string'],
'accept' => 'application/pdf',
],
]
];
}