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>
