File Attachments
File attachment library.
How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF FILE ATTACH
// =======================================================
new HSFileAttach('.js-file-attach')
})();
</script>
Basic example
<form>
<label for="basicFormFile" class="js-file-attach form-label"
data-hs-file-attach-options='{
"textTarget": "[for=\"customFile\"]"
}'>File input example</label>
<input class="form-control" type="file" id="basicFormFile">
</form>
Custom file button
<form>
<label for="btnAttachFormFile" class="js-file-attach form-attachment-btn btn btn-sm btn-primary"
data-hs-file-attach-options='{
"textTarget": "[for=\"customFile\"]"
}'>File input example</label>
<input class="form-attachment-btn-label" type="file" id="btnAttachFormFile">
</form>
Avatar uploader
<form>
<!-- Media -->
<div class="d-flex align-items-center">
<!-- Avatar -->
<label class="avatar avatar-xl avatar-circle" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</label>
<div class="d-flex gap-3 ms-4">
<div class="form-attachment-btn btn btn-sm btn-primary">Upload photo
<input type="file" class="js-file-attach form-attachment-btn-label" id="avatarUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarImg",
"mode": "image",
"targetAttr": "src",
"resetTarget": ".js-file-attach-reset-img",
"resetImg": "../assets/img/160x160/img1.jpg",
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</div>
<!-- End Avatar -->
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
</div>
</div>
<!-- End Media -->
</form>
Modal example
File attachment
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">File attachment</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Media -->
<div class="d-flex align-items-center">
<!-- Avatar -->
<label class="avatar avatar-xl avatar-circle" for="avatarModalUploader">
<img id="avatarModalImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</label>
<div class="d-flex gap-3 ms-4">
<div class="form-attachment-btn btn btn-sm btn-primary">Upload photo
<input type="file" class="js-file-attach form-attachment-btn-label" id="avatarModalUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarModalImg",
"mode": "image",
"targetAttr": "src",
"resetTarget": ".js-file-attach-reset-img",
"resetImg": "../assets/img/160x160/img1.jpg",
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</div>
<!-- End Avatar -->
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
</div>
</div>
<!-- End Media -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Supported file types. If empty all supported. | [] |
|
|
Max size for uploading file. | 1024 |
|
|
Supported two mods (image/simple). image - show image after uploading. simple - show file name after uploading. | simple |
|
|
Element selector with src for image mode. |
null |
|
|
Element selector for simple mode. |
null |
|
|
Element selector to reset form. | null |
|
|
Error message text if the file size is larger than the allowed. | 'File is too big!' |
|
|
Error message text if file type is not supported. | 'Unsupported file type' |