Form Layouts - File Attachement Forms
Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.
Upload picture #1
<!-- Update Avatar Form -->
<form class="media align-items-center">
<div class="u-lg-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
</div>
<div class="media-body">
<label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn mb-1 mb-sm-0 mr-1" for="fileAttachmentBtn">
Upload New Picture
<input id="fileAttachmentBtn" name="file-attachment" type="file" class="file-attachment-btn__label">
</label>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover mb-1 mb-sm-0">Delete</button>
</div>
</form>
<!-- End Update Avatar Form -->
Upload picture #1
<!-- File Attachment Input -->
<label class="file-attachment-input mb-7" for="imagesAttachmentInput">
<img class="js-svg-injector max-width-10 mb-3" src="../../assets/svg/illustrations/add-file.svg" alt="SVG"
data-parent="#uploadForm">
<span class="d-block mb-2">Browse your device and upload images</span>
<small class="d-block text-muted">Maximum file size is 2MB</small>
<input id="imagesAttachmentInput" name="images-attachment" type="file" class="js-custom-file-attach file-attachment-input__label"
data-result-text-target="#fileUploadText">
<span id="fileUploadText"></span>
</label>
<!-- End File Attachment Input -->
<button type="submit" class="btn btn-primary btn-block transition-3d-hover">Submit</button>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.file-attach.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of file attach module
$.HSCore.components.HSFileAttach.init('.js-custom-file-attach');
});
</script>