File upload - Forms

Fullscreen

<div data-ecl-file-upload-group="true" class="ecl-form-group"><label class="ecl-file-upload__button-container"
    for="example-file-upload-default"><span data-ecl-file-upload-button="true" data-ecl-file-upload-label-choose=""
      data-ecl-file-upload-label-replace=""
      class="ecl-file-upload__button ecl-button ecl-button--primary"></span></label><input type="file"
    data-ecl-file-upload-input="true" id="example-file-upload-default" class="ecl-file-upload" />
  <ul class="ecl-file-upload__list" data-ecl-file-upload-list="true"></ul>
</div>

Try it yourself on the playground

Playground

Multiple uploads

Fullscreen

<div data-ecl-file-upload-group="true" class="ecl-form-group"><label class="ecl-file-upload__button-container"
    for="example-file-upload-multiple"><span data-ecl-file-upload-button="true" data-ecl-file-upload-label-choose=""
      data-ecl-file-upload-label-replace=""
      class="ecl-file-upload__button ecl-button ecl-button--primary"></span></label><input type="file"
    data-ecl-file-upload-input="true" id="example-file-upload-multiple" class="ecl-file-upload" />
  <ul class="ecl-file-upload__list" data-ecl-file-upload-list="true"></ul>
</div>

Try it yourself on the playground

Playground

Disabled

Fullscreen

<div data-ecl-file-upload-group="true" class="ecl-form-group"><label class="ecl-file-upload__button-container"
    for="example-file-upload-disabled"><span data-ecl-file-upload-button="true" data-ecl-file-upload-label-choose=""
      data-ecl-file-upload-label-replace=""
      class="ecl-file-upload__button ecl-button ecl-button--primary"></span></label><input type="file"
    data-ecl-file-upload-input="true" id="example-file-upload-disabled" class="ecl-file-upload" />
  <ul class="ecl-file-upload__list" data-ecl-file-upload-list="true"></ul>
</div>

Try it yourself on the playground

Playground

With error

Fullscreen

<div data-ecl-file-upload-group="true" class="ecl-form-group"><label class="ecl-file-upload__button-container"
    for="example-file-upload-invalid"><span data-ecl-file-upload-button="true" data-ecl-file-upload-label-choose=""
      data-ecl-file-upload-label-replace=""
      class="ecl-file-upload__button ecl-button ecl-button--primary"></span></label><input type="file"
    data-ecl-file-upload-input="true" id="example-file-upload-invalid" class="ecl-file-upload" />
  <ul class="ecl-file-upload__list" data-ecl-file-upload-list="true"></ul>
</div>

Try it yourself on the playground

Playground

Optional

Fullscreen

<div data-ecl-file-upload-group="true" class="ecl-form-group"><label class="ecl-file-upload__button-container"
    for="example-file-upload-optional"><span data-ecl-file-upload-button="true" data-ecl-file-upload-label-choose=""
      data-ecl-file-upload-label-replace=""
      class="ecl-file-upload__button ecl-button ecl-button--primary"></span></label><input type="file"
    data-ecl-file-upload-input="true" id="example-file-upload-optional" class="ecl-file-upload" />
  <ul class="ecl-file-upload__list" data-ecl-file-upload-list="true"></ul>
</div>

Try it yourself on the playground

Playground