Skip to main content

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',
],
]
];
}