plocket
commented
3 years ago Old Bootstrap DOM:
<div style="" class="dashowif" data-saveas="eFswXS5wYWdlcw" data-showif-sign="1" data-showif-mode="0" data-showif-var="eC50aGVyZV9hcmVfYW55" data-showif-val="True">
<div class="form-group row darequired da-field-container da-field-container-datatype-files"><label for="X2ZpZWxkXzM" class="col-md-4 col-form-label da-form-label datext-right">Upload the first document</label>
<div class="col-md-8 dafieldpart">
<div class="file-input theme-fas file-input-ajax-new">
<div class="file-preview ">
<button type="button" class="close fileinput-remove" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class=" file-drop-zone clearfix">
<div class="file-drop-zone-title">Drag & drop files here …</div>
<div class="file-preview-thumbnails clearfix">
</div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
<div class="kv-upload-progress kv-hidden" style="display: none;">
<div class="progress">
<div class="progress-bar bg-success progress-bar-success progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="input-group file-caption-main">
<div class="file-caption form-control kv-fileinput-caption" tabindex="500">
<span class="file-caption-icon"></span>
<input class="file-caption-name" placeholder="Select files ...">
</div>
<div class="input-group-btn input-group-append">
<button type="button" tabindex="500" title="Clear all unprocessed files" class="btn btn-default btn-secondary fileinput-remove fileinput-remove-button"><svg class="svg-inline--fa fa-trash-alt fa-w-14" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
<path fill="currentColor" d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"></path>
</svg><!-- <i class="fas fa-trash-alt"></i> Font Awesome fontawesome.com --> <span class="hidden-xs">Remove</span></button>
<button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default btn-secondary kv-hidden fileinput-cancel fileinput-cancel-button"><svg class="svg-inline--fa fa-ban fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ban" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"></path>
</svg><!-- <i class="fas fa-ban"></i> Font Awesome fontawesome.com --> <span class="hidden-xs">Cancel</span></button>
<div tabindex="500" class="btn btn-primary btn-file"><svg class="svg-inline--fa fa-folder-open fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path>
</svg><!-- <i class="fas fa-folder-open"></i> Font Awesome fontawesome.com --> <span class="hidden-xs">Browse …</span><input aria-describedby="X2ZpZWxkXzM-error" alt="You can upload a file here" type="file" tabindex="-1" class="dafile" data-show-upload="false" data-maximagesize="1024" data-imagetype="jpeg" data-preview-file-type="text" name="X2ZpZWxkXzM" id="X2ZpZWxkXzM" multiple="" accept="image/png, image/jpg, .doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,.pdf"></div>
</div>
</div>
</div><label style="display: none;" for="X2ZpZWxkXzM" class="da-has-error text-danger" id="X2ZpZWxkXzM-error"></label>
</div>
</div>
</div>
Boostrap 5 DOM: