Select File

Example of of result of the Select File Component

The SelectFileComponent allows you to create a dropdown menu where the user can select files. This component is useful when the user needs to choose from different files (for example, templates or icons). When selecting a Blade view, the admin interface will be populated with the components and input fields of the selected file. And the SelectFileComponent will automatically display the content of the selected file.

This can be very powerful. Some posibilities:

  • Allow users to select SVG files from your repository and let them choose the color
  • Enable users to pick from a range of templates you’ve designed
  • By creating individual Blade files for the user to choose from, you can build your own Page Builder

Choose and display files

{!! newRoot(new \model\icon)->selectFile('content')->match(['/view/icons/*.svg']) !!}

Include the Selected Blade View

When the user has to select different templates and you want to load the view of the selected file, use the following syntax:

@php($footer = newRoot(new \model\footer))

@php($target = $footer->selectFile('template')->match(['/view/footers/*.blade.php']))
@include($target, ['model' => $target]);

The contents of the selected file must use the extendModel function.

@php($footer = extendModel($model)->label('Small Footer'))
<h1>{{ $footer->text('The title') }}</h1>

This may also feature a Blade file containing an SVG to dynamically generate the icon with a color, allowing the user to select the color:

@php($icon = extendModel($model)->label('Arrow'))
<svg fill="{{ $icon->select('color')->options(['red', 'green', 'blue']) }}">
    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/>
</svg>

You can define multiple directories and types in the match method:

->selectFile('icon')->match(['/view/icons/*.svg', '/view/icons/*.blade']);

This approach allows you to specify both SVG and Blade files from different directories

Methods:

Label

label(string $label) This method sets the title for the admin panel.

$column->selectFile('icon')->match(['/view/icons'])->label('Icon');

Default

default(string $default) This method sets the default value when the user hasn't saved any value.

$column->selectFile('icon')->match(['/view/icons'])->default('/view/icons/arrow.svg');

Match

This method is required to list all files by directories.

You can use the glob pattern:

  • The ? matches one character except a /.
  • The * matches zero or more characters except a /.
  • The ** matches zero or more characters including a /.
  • The [abc] matches one character in the set.
  • The [!abc] matches one character not in the set.
  • The [a-z] matches one character in the range.
  • Example: ['*.css', '/templates/**.css'].
$column->selectFile('icon')->match(['/view/icons']);
$column->selectFile('template')->match(['/view/footers/*.blade.php']);
// Search recursively in all directories
$column->selectFile('template')->match(['/view/footers/**.blade.php']);

Use Label For

This method saves the label of the selected file in a hidden field. In the admin panel, the label will be displayed in the list. Currently, this is the only reason to use a hidden field, so we do not document it further. If you want to use a hidden field, please let us know.

$column->selectFile('icon')->match(['/view/icons'])->useLabelFor('label_of_icon');
$column->hidden('label_of_icon');
Stay updated by joining the waitlist