File Input

The File Input component provides a reusable pattern for fileinput in the interface.

Fileinput by drag and drop, single file

<form class="c-form u-padding__y--4 js-form-validation" id="id_6aaf3c7b219c2" data-component="form" method="post" action="#" name="id_6aaf3c7b219c2">
  <!-- fileinput.blade.php -->
  <div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="1" data-js-file-min="0" data-js-file-is-multi="0" id="id_6aaf3c7b20b0e" data-component="fileinput">
    <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files"
    data-component="element">
      <!-- notice.blade.php -->
      <div class="c-notice c-notice--danger" id="id_6aaf3c7b20cc1" data-component="notice" aria-labelledby="notice__text__id_6aaf3c7b20cc1">
        <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaf3c7b20cc1" 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_6aaf3c7b20b0e" id="label_id_6aaf3c7b20b0e" data-js-file="label" data-component="element">Choose files</label> 
    <!-- Actual input -->
     <input type="file" class="c-fileinput__input" name="files" id="input_id_6aaf3c7b20b0e" 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--meta" data-component="typography">
          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" data-js-file="button" aria-live="polite" type="button" aria-label=
        "Select file" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here"
        data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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 -->
                </div>
                <div class="c-fileinput__item-text"></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" aria-label="delete" data-js-file="remove" type=
                  "button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
                   </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-component="element">
            <div class="c-element c-fileinput__accepted-files" data-component="element">
              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-component="element">
            /
          </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

<form class="c-form u-padding__y--4 js-form-validation" id="id_6aaf3c7b223f8" data-component="form" method="post" action="#" name="id_6aaf3c7b223f8">
  <!-- fileinput.blade.php -->
  <div class="c-field c-fileinput is-empty" data-js-file="dropzone" data-js-file-max="10" data-js-file-min="0" data-js-file-is-multi="1" id="id_6aaf3c7b21ad6" data-component="fileinput">
    <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files"
    data-component="element">
      <!-- notice.blade.php -->
      <div class="c-notice c-notice--danger" id="id_6aaf3c7b21b42" data-component="notice" aria-labelledby="notice__text__id_6aaf3c7b21b42">
        <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaf3c7b21b42" 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_6aaf3c7b21ad6" id="label_id_6aaf3c7b21ad6" data-js-file="label" data-component="element">Choose files</label> 
    <!-- Actual input -->
     <input type="file" class="c-fileinput__input" name="files[]" id="input_id_6aaf3c7b21ad6" accept="audio/*,video/*,image/*" multiple="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--meta" data-component="typography">
          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" data-js-file="button" aria-live="polite" type="button" aria-label=
        "Select file" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here"
        data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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 -->
                </div>
                <div class="c-fileinput__item-text"></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" aria-label="delete" data-js-file="remove" type=
                  "button" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
                   </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-component="element">
            <div class="c-element c-fileinput__accepted-files" data-component="element">
              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-component="element">
            /
          </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

Fileinput with minimum number of files

Choose files

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

Allowed files: : Audios Videos Images

<form class="c-form u-padding__y--4 js-form-validation" id="id_6aaf3c7b23050" data-component="form" method="post" action="#" name="id_6aaf3c7b23050">
  <!-- fileinput.blade.php -->
  <div class="c-field c-fileinput c-fileinput--preview is-empty" data-js-file-preview="1" data-js-file="dropzone" data-js-file-max="10" data-js-file-min="2" data-js-file-is-multi="1" id=
  "id_6aaf3c7b22500" data-component="fileinput">
    <template class="c-element" data-js-file="notice-template" data-js-upload-error-message="Following files could not be uploaded" data-js-upload-error-message-min-files="Please upload more files"
    data-component="element">
      <!-- notice.blade.php -->
      <div class="c-notice c-notice--danger" id="id_6aaf3c7b22575" data-component="notice" aria-labelledby="notice__text__id_6aaf3c7b22575">
        <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaf3c7b22575" 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_6aaf3c7b22500" id="label_id_6aaf3c7b22500" data-js-file="label" data-component="element">Choose files</label> 
    <!-- Actual input -->
     <input type="file" class="c-fileinput__input" name="files[]" id="input_id_6aaf3c7b22500" accept="audio/*,video/*,image/*" multiple="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--meta" data-component="typography">
          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" data-js-file="button" aria-live="polite" type="button" aria-label=
        "Select file" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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" data-js-file="drop" aria-hidden="true" type="button" aria-label="Drop files here"
        data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></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-preview" data-js-file="preview">
                <!-- icon.blade.php -->
              </div>
              <div class="c-fileinput__info-container"></div>
              <div class="c-fileinput__item-remove" data-tooltip="Remove file">
                <button class="c-button c-fileinput__item-remove-button c-button__filled c-button__filled--primary c-button--xs" data-js-file="remove" type="button" data-component=
                "button"><span class="c-button__label"><!-- icon.blade.php -->
                 </span></button>
              </div>
            </div>
          </template>
        </div>
        <div class="c-fileinput__accepted-files-wrapper" data-js-file="counter-wrapper">
          <div class="c-element" data-component="element">
            <div class="c-element c-fileinput__accepted-files" data-component="element">
              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-component="element">
            /
          </div>
        </div>
      </div>
    </div>
  </div><br />
  <button class="c-button c-button__filled c-button__filled--default c-button--md" type="submit" aria-label="Submit" data-component="button"><span class="c-button__label"><span class=
  "c-button__label-text">Submit</span></span></button>
</form>

@form(['classList' => ['u-padding__y--4']])
    @fileinput([
        'multiple' => true,
        'filesMin' => 2,
        'label' => 'Choose files',
        'preview' => true,
        'description' => 'Display as a file input area (dropzone, multi file).',
    ])
    @endfileinput
    <br>
    @button([
        'type' => 'submit',
        'text' => 'Submit',
    ])
    @endbutton
@endform

API

Parameter	Default	Type	Description
description		string	-
name	files	string	-
accept	audio/,video/,image/*	string	-
multiple	false	boolean	-
preview	false	boolean	-
maxSize	null	string\|integer\|null	-
uploadErrorMessage	null	?string	-
uploadErrorMessageMinFiles	null	?string	-
icon	file_upload	string	-
required	false	boolean	-
filesMax	1	integer	-
filesMin	0	integer	-
label		string	-
buttonLabel	Select file	string	-
buttonRemoveLabel	Remove file	string	-
buttonDropLabel	Drop files here	string	-
allowedFileTypesLabel	Allowed files:	string	-
fileTypeVideosLabel	Videos	string	-
fileTypeImagesLabel	Images	string	-
fileTypeAudioLabel	Audios	string	-
maximumSizeLabel	Maximum size	string	-

CSS API

Variable	Default	Type	Values	Description
--c-fileinput--border-radius	var(--border-radius)	range	-	Border Radius
--c-fileinput--border-width	var(--border-width)	range	-	Size
--c-fileinput--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-fileinput--color--surface	var(--color--surface)	color	-	Surface
--c-fileinput--color--danger	var(--color--danger)	color	-	Danger
--c-fileinput--color--success	var(--color--success)	color	-	Success
--c-fileinput--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.
--c-fileinput--font-size-80	var(--font-size-80)	range	-	Two steps below base in the type scale.
--c-fileinput--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-fileinput--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-fileinput--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-fileinput--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-fileinput--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-fileinput--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.
--c-fileinput--color--danger-border	var(--color--danger-border)	color	-	Manual companion token for danger border and emphasis states.
--c-fileinput--color--danger-contrast	var(--color--danger-contrast)	color	-	Danger Contrast

Similar components

Field Collection Icon Section