<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><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="" /><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>
<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><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="" /><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>
<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=""><input type="file" class="ecl-file-upload"
data-ecl-file-upload-input="" data-ecl-auto-init="FileUpload" disabled="" /><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>
<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=""><input type="file"
class="ecl-file-upload ecl-file-upload--invalid" data-ecl-file-upload-input=""
data-ecl-auto-init="FileUpload" /><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>
<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=""><input type="file" class="ecl-file-upload"
data-ecl-file-upload-input="" data-ecl-auto-init="FileUpload" /><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>
<ul class="ecl-file-upload__list" data-ecl-file-upload-list=""></ul>
</div>
Try it yourself on the playground
Playground