Form Upload
Give textual form controls like inputs and textareas an upgrade with custom styles, sizing, focus states, and more.
Use
data-max-files="1" attribute to .js-upload to enable single file upload. same as use data-max-filesize="12" attribute for Limited file size, data-accepted-files="image/*" attribute for accepted filetype, data-message-icon="img" attribute for change icon.
<div class="form-group">
<label for="dropzoneFile1" class="form-label">Default Dropzone</label>
<div class="form-control-wrap">
<div class="js-upload" id="dropzoneFile1">
<div class="dz-message" data-dz-message>
<div class="dz-message-icon"></div>
<span class="dz-message-text">Drag and drop file</span>
<div class="dz-message-btn mt-2">
<button class="btn btn-md btn-primary">Upload</button>
</div>
</div>
</div>
</div>
</div>
Form File Input
Basic styled form file input.
Use
type="file" attribute to input to enable file upload mode, same as disabled attribute to enable disabled mode, multiple attribute to enable multiple file upload mode.
<div class="form-group">
<label for="formFile" class="form-label">Default file input example</label>
<div class="form-control-wrap">
<input class="form-control" type="file" id="formFile">
</div>
</div>
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
<div class="form-control-wrap">
<input class="form-control" id="formFileRg" type="file">
</div>
