<div class="ecl-form-group" data-ecl-file-upload-group=""><label class="ecl-form-label"
for="example-input-id-1">Label<span class="ecl-form-label__required">*</span></label>
<div class="ecl-help-block">This is the input&#x27;s helper text.<div class="ecl-u-mt-xs ecl-u-type-color-grey-75">
Only <strong>txt doc docx pdf odt rtf</strong> files. Maximum size is <strong>5 MB</strong>.<br />Encrypted
documents and those containing macros are not accepted.</div>
</div><label class="ecl-file-upload__button-container" for="example-input-id-1"><span
class="ecl-file-upload__button ecl-button ecl-button--primary" data-ecl-file-upload-button=""
data-ecl-file-upload-label-choose="Choose file" data-ecl-file-upload-label-replace="Replace file">Choose
file</span></label><input type="file" class="ecl-file-upload" data-ecl-file-upload-input=""
data-ecl-auto-init="FileUpload" id="example-input-id-1" name="file-upload-name" required="" />
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
PlaygroundMultiple uploads
<div class="ecl-form-group" data-ecl-file-upload-group=""><label class="ecl-form-label"
for="example-file-upload-multiple">Label<span class="ecl-form-label__required">*</span></label>
<div class="ecl-help-block">This is the input&#x27;s helper text.<div class="ecl-u-mt-xs ecl-u-type-color-grey-75">
Only <strong>txt doc docx pdf odt rtf</strong> files. Maximum size is <strong>5 MB</strong>.<br />Encrypted
documents and those containing macros are not accepted.</div>
</div><label class="ecl-file-upload__button-container" for="example-file-upload-multiple"><span
class="ecl-file-upload__button ecl-button ecl-button--primary" data-ecl-file-upload-button=""
data-ecl-file-upload-label-choose="Choose files" data-ecl-file-upload-label-replace="Replace files">Choose
files</span></label><input type="file" class="ecl-file-upload" data-ecl-file-upload-input=""
data-ecl-auto-init="FileUpload" id="example-file-upload-multiple" name="file-upload-name" required="" multiple="" />
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
PlaygroundDisabled
<div class="ecl-form-group" data-ecl-file-upload-group=""><label class="ecl-file-upload__button-container"><span
class="ecl-file-upload__button ecl-button ecl-button--primary" data-ecl-file-upload-button=""
disabled=""></span></label><input type="file" class="ecl-file-upload" data-ecl-file-upload-input=""
data-ecl-auto-init="FileUpload" disabled="" />
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
PlaygroundWith error
<div class="ecl-form-group" data-ecl-file-upload-group=""><label class="ecl-file-upload__button-container"><span
class="ecl-file-upload__button ecl-button ecl-button--primary"
data-ecl-file-upload-button=""></span></label><input type="file" class="ecl-file-upload ecl-file-upload--invalid"
data-ecl-file-upload-input="" data-ecl-auto-init="FileUpload" />
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
PlaygroundOptional
<div class="ecl-form-group" data-ecl-file-upload-group=""><label class="ecl-file-upload__button-container"><span
class="ecl-file-upload__button ecl-button ecl-button--primary"
data-ecl-file-upload-button=""></span></label><input type="file" class="ecl-file-upload"
data-ecl-file-upload-input="" data-ecl-auto-init="FileUpload" />
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
Playground