File input

Displays a file input.

Fileinput 

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

<div class="c-fileinput unlist c-fileinput--area" id="673ed285851ef" data-uid="673ed285851fd">
    <label class="c-fileinput__label" for="fs_673ed285851ef">Choose files...</label>
    
    <input type="file"
        class="c-fileinput__input "
        name="files[]"
        id="fs_673ed285851ef"
        accept="audio/*,video/*,image/*"
        multiple
        
    />

        <label class="c-button c-fileinput__button c-button__basic c-button__basic--default c-button--md" target="_top" for="fs_673ed285851ef" type="button" aria-label="Choose files..." data-uid="673ed2858526a">   
            
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--file-upload c-icon--material c-icon--material-file_upload material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed28585320">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Choose files...
            </span>
        
   </label>
      <ul class="c-fileinput__files js-form-file-input u-display--none">
            <template>
                <li>
                        <!-- icon.blade.php -->
    <span class="c-icon c-icon--attach-file c-icon--material c-icon--material-attach_file material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed28585369">
                    </span>
					<span class="u-strong js-file-input-name"></span> 
                    <span class="js-file-input-size"></span>
                        <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__remove-file c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed2858539f">
                    </span>
				</li>
            </template>
        </ul>

</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
decription string - -
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
buttonLabel string - -
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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Fileinput/fileinput.json