File input

Displays a file input.

Fileinput

<!-- fileinput.blade.php -->

<div id="62bed6738fdc5" class="c-fileinput unlist c-fileinput--area" data-uid="62bed6738fdbf">

    <input type="file"
        class="c-fileinput__input "
        name="files[]"
        id="fs_62bed6738fdc5"
        accept="audio/*,video/*,image/*"
        multiple
            />

    <label for="fs_62bed6738fdc5" class="c-button c-button__filled c-button__filled--primary c-button--md c-fileinput__label">
        
        <!-- icon.blade.php -->
    <i id="62bed673901df" class="c-icon c-icon--color-white c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bed673901d9">
                    file_upload
            </i>
        <span>
            
                Choose files...
            
        </span>
    </label>

</div>
@fileinput([
    'classList' => ['unlist'],
    'display' => 'area',
    'multiple' => true,
    'label' => 'Choose files...'
])
@endfileinput

Blade component parameters

Key Default value Type Available values Description
display string - Display input uploader as button or area
name files string - files
accept audio/*,video/*,image/* string - audio/*,video/*,image/*
multiple false boolean - Allow single or multiple files
beforeLabel string - Insert before label
afterLabel string - Input label
label string - Insert after label
icon file_upload string - @link:component/icon
required false boolean - If field is required
filesMax false boolean - Maximum number of files (false, int)
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Fileinput/fileinput.json