File input

Displays a file input.

Fileinput by drag and drop, single file

Display as a file input area (dropzone, single file).

Allowed files: Audios Videos Images 
<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="id_68b86bda36b34" data-uid="68b86bda36b3f" method="POST" action="#">

    
    
    <!-- fileinput.blade.php -->
<div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="1" data-js-file-is-multi="0" id="id_68b86bda35c70" data-uid="68b86bda35c96">
        <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-uid="68b86bda36378">
        <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_68b86bda35d0d" data-uid="68b86bda35d1d" aria-labelledby="notice__text__id_68b86bda35d0d">
    
    
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86bda361a7">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86bda35d0d" data-js-notice-message="true" class="c-notice__message">
                            
                        <!-- Message -->
        </span>
    
    
    </div>
    </template>
                <label class="c-element c-field__label c-fileinput__label" for="input_id_68b86bda35c70" id="label_id_68b86bda35c70" data-js-file="label" data-uid="68b86bda363d3">
        Choose files
    </label>
    
    <!-- Actual input -->
    <input type="file"
        class="c-fileinput__input"
        name="files"
        id="input_id_68b86bda35c70"
        accept="audio/*,video/*,image/*"
        
        
        data-js-file="input"
        aria-hidden="true"
        tabindex="-1"
    >

    <div class="c-fileinput__inner c-fileinput__inner--area">
        <div class="c-fileinput__area" data-js-file="area">

          <!-- typography.blade.php   original: p -->
<p class="c-typography c-field__description c-fileinput__description u-margin__top--1 u-margin__bottom--3 c-typography__variant--p" data-uid="68b86bda3645a">
    Display as a file input area (dropzone, single file).
</p>  
  <!-- This button is used to trigger the file input -->
      <button class="c-button c-fileinput__button js-file-input-button c-button__basic c-button__basic--default c-button--md" target="_top" data-js-file="button" aria-live="polite" type="button" aria-label="Select file" data-uid="68b86bda36560">   
     <span class="c-button__label">                     <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" data-material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36657">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Select file
            </span>
        
    </span> </button>
  <!-- This button is used to illustrate drag and drop, it has no function -->
      <button class="c-button js-file-input-drop c-button__basic c-button__basic--default c-button--md" target="_top" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here" data-uid="68b86bda366bc">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--place-item c-icon--material c-icon--material-place_item material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="place_item" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36789">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Drop files here
            </span>
        
    </span> </button>
  <div class="c-fileinput__file-list" data-js-file="list">
            <template data-js-file="listitem-template">
    <div class="c-fileinput__item" data-js-file="listitem" data-js-file-id="">
        <div class="c-fileinput__item-container">
            <div class="c-fileinput__item-icon-wrapper">
                    <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__item-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" aria-hidden="false" data-js-file="icon" data-material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda368fd">
                    </span>
            </div>

            <div class="c-fileinput__item-text">
                <span class="c-fileinput__item-name" data-js-file="filename"></span>
                <span class="c-fileinput__item-size" data-js-file="filesize"></span>
            </div>

            <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                    <button class="c-button c-fileinput__item-remove-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" target="_top" aria-label="Remove file" data-js-file="remove" type="button" data-uid="68b86bda369cd">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36a1e">
                    </span>
            </span>
        
        
    </span> </button>            </div>
        </div>
    </div>
</template>      </div>
  
   <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
            <div class="c-element" data-uid="68b86bda36a9c">
        <div class="c-element c-fileinput__accepted-files" data-uid="68b86bda36a6f">
        Allowed files: Audios Videos Images
    </div>
    </div>
        
            <div class="c-element c-fileinput__filecounter" data-js-file="counter" data-counter-current="0" data-counter-max="1" aria-hidden="true" aria-live="polite" data-uid="68b86bda36ac6">
        /
    </div>
   </div>
</div>    </div>
</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
@endform

Fileinput by drag and drop, multiple files

Display as a file input area (dropzone, multi file).

Allowed files: Audios Videos Images 
<!-- form.blade.php -->
<form class="c-form u-padding__y--4 js-form-validation" id="id_68b86bda36fb5" data-uid="68b86bda36fbd" method="POST" action="#">

    
    
    <!-- fileinput.blade.php -->
<div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="10" data-js-file-is-multi="1" id="id_68b86bda36bc1" data-uid="68b86bda36bd5">
        <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-uid="68b86bda36c99">
        <!-- notice.blade.php -->
<div class="c-notice c-notice--danger" id="id_68b86bda36c06" data-uid="68b86bda36c12" aria-labelledby="notice__text__id_68b86bda36c06">
    
    
            <span class="c-notice__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86bda36c5a">
                    </span>
        </span>
        
    
    
    
            <span id="notice__text__id_68b86bda36c06" data-js-notice-message="true" class="c-notice__message">
                            
                        <!-- Message -->
        </span>
    
    
    </div>
    </template>
                <label class="c-element c-field__label c-fileinput__label" for="input_id_68b86bda36bc1" id="label_id_68b86bda36bc1" data-js-file="label" data-uid="68b86bda36ccb">
        Choose files
    </label>
    
    <!-- Actual input -->
    <input type="file"
        class="c-fileinput__input"
        name="files[]"
        id="input_id_68b86bda36bc1"
        accept="audio/*,video/*,image/*"
        multiple
        
        data-js-file="input"
        aria-hidden="true"
        tabindex="-1"
    >

    <div class="c-fileinput__inner c-fileinput__inner--area">
        <div class="c-fileinput__area" data-js-file="area">

          <!-- typography.blade.php   original: p -->
<p class="c-typography c-field__description c-fileinput__description u-margin__top--1 u-margin__bottom--3 c-typography__variant--p" data-uid="68b86bda36d18">
    Display as a file input area (dropzone, multi file).
</p>  
  <!-- This button is used to trigger the file input -->
      <button class="c-button c-fileinput__button js-file-input-button c-button__basic c-button__basic--default c-button--md" target="_top" data-js-file="button" aria-live="polite" type="button" aria-label="Select file" data-uid="68b86bda36d54">   
     <span class="c-button__label">                     <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" data-material-symbol="file_upload" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36d90">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Select file
            </span>
        
    </span> </button>
  <!-- This button is used to illustrate drag and drop, it has no function -->
      <button class="c-button js-file-input-drop c-button__basic c-button__basic--default c-button--md" target="_top" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here" data-uid="68b86bda36dd4">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--place-item c-icon--material c-icon--material-place_item material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="place_item" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36e0c">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Drop files here
            </span>
        
    </span> </button>
  <div class="c-fileinput__file-list" data-js-file="list">
            <template data-js-file="listitem-template">
    <div class="c-fileinput__item" data-js-file="listitem" data-js-file-id="">
        <div class="c-fileinput__item-container">
            <div class="c-fileinput__item-icon-wrapper">
                    <!-- icon.blade.php -->
    <span class="c-icon c-fileinput__item-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" aria-hidden="false" data-js-file="icon" data-material-symbol="attach_file" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36e64">
                    </span>
            </div>

            <div class="c-fileinput__item-text">
                <span class="c-fileinput__item-name" data-js-file="filename"></span>
                <span class="c-fileinput__item-size" data-js-file="filesize"></span>
            </div>

            <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                    <button class="c-button c-fileinput__item-remove-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" target="_top" aria-label="Remove file" data-js-file="remove" type="button" data-uid="68b86bda36ea4">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--delete c-icon--material c-icon--material-delete material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" data-material-symbol="delete" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86bda36ee4">
                    </span>
            </span>
        
        
    </span> </button>            </div>
        </div>
    </div>
</template>      </div>
  
   <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
            <div class="c-element" data-uid="68b86bda36f5f">
        <div class="c-element c-fileinput__accepted-files" data-uid="68b86bda36f2d">
        Allowed files: Audios Videos Images
    </div>
    </div>
        
            <div class="c-element c-fileinput__filecounter" data-js-file="counter" data-counter-current="0" data-counter-max="10" aria-hidden="true" aria-live="polite" data-uid="68b86bda36f87">
        /
    </div>
   </div>
</div>    </div>
</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
@endform

Blade component parameters

Key Default value Type Available values Description
description string - Additional description or instructions.
name files string - files
accept audio/*,video/*,image/* string - What file types to accept. Use MIME types. Example: audio/*,video/*,image/*
multiple false boolean - Allow single or multiple files
label string - Label to show on the field
buttonLabel Select file string - What text to show on the button
buttonRemoveLabel Remove file string - What text to show on the remove button
buttonDropLabel Drop files here string - A label for the drop area
preview false boolean - -
fileMaxSize NULL - -
maxSize NULL - Maximum file size allowed in MB. Number (int) in bytes or string (small, medium, large). Default is null (no limit).
uploadErrorMessage NULL - Message to show when upload fails
icon file_upload string - @link:component/icon
required false boolean - If field is required
filesMax 1 integer - Maximum number of files (int). Foced to 1 if multiple is false. Default 10 for multiple.
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