File input
Displays a file input.
Fileinput by drag and drop, single file
<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="680f9280474e7" data-uid="680f9280474ed" method="POST" action="#">
<br />
<b>Warning</b>: The parameter <b>"description"</b> is not recognized in the component <b>"fileinput"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<!-- fileinput.blade.php -->
<div class="c-fileinput" id="680f9280470cf" data-uid="680f9280470de">
<label class="c-fileinput__label" for="fs_680f9280470cf">Choose files</label>
<!-- typography.blade.php original: div -->
<div class="c-typography text-sm text-dark-gray c-typography__variant--div" data-uid="680f92804724f">
Display as a file input area (dropzone, single file).
</div>
<input type="file"
class="c-fileinput__input "
name="files"
id="fs_680f9280470cf"
accept="audio/*,video/*,image/*"
/>
<label class="c-button c-fileinput__button c-button__basic c-button__basic--default c-button--md" target="_top" for="fs_680f9280470cf" type="button" aria-label="Choose files" data-uid="680f9280472bb">
<span class="c-button__loader"></span>
<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="680f9280473e7">
</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="680f928047444">
</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="680f92804748a">
</span>
</li>
</template>
</ul>
</div>
</form>@form(['classList' => ['u-padding__y--4']])
@fileinput([
'multiple' => false,
'label' => 'Choose files',
'description' => 'Display as a file input area (dropzone, single file).',
])
@endfileinput
@endformFileinput by drag and drop, multiple files
<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="680f92804774b" data-uid="680f928047751" method="POST" action="#">
<br />
<b>Warning</b>: The parameter <b>"description"</b> is not recognized in the component <b>"fileinput"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>244</b><br />
<!-- fileinput.blade.php -->
<div class="c-fileinput" id="680f9280475bc" data-uid="680f9280475c4">
<label class="c-fileinput__label" for="fs_680f9280475bc">Choose files</label>
<!-- typography.blade.php original: div -->
<div class="c-typography text-sm text-dark-gray c-typography__variant--div" data-uid="680f9280475ff">
Display as a file input area (dropzone, multi file).
</div>
<input type="file"
class="c-fileinput__input "
name="files[]"
id="fs_680f9280475bc"
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_680f9280475bc" type="button" aria-label="Choose files" data-uid="680f928047641">
<span class="c-button__loader"></span>
<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="680f928047682">
</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="680f9280476cc">
</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="680f928047716">
</span>
</li>
</template>
</ul>
</div>
</form>@form(['classList' => ['u-padding__y--4']])
@fileinput([
'multiple' => true,
'label' => 'Choose files',
'description' => 'Display as a file input area (dropzone, multi file).',
])
@endfileinput
@endformBlade 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. |