File Attach
Make file input dynamic.
How to use?
Copy-paste the following
<script> near the
end of your pages under JS Blueberry 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>
$(document).on('ready', function () {
// initialization of custom file
$('.js-file-attach').each(function () {
var customFile = new HSFileAttach($(this)).init();
});
});
</script>
Examples
<form>
<div class="custom-file">
<input type="file" class="js-file-attach custom-file-input" id="customFile"
data-hs-file-attach-options='{
"textTarget": "[for=\"customFile\"]"
}'>
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
Avatar example New
<form>
<label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
</label>
<div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
<input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarImg",
"mode": "image",
"targetAttr": "src"
}'>
</div>
</form>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-file-attach-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For
data attributes, append the option name to
data-hs-file-attach-options='{}'.
| Parameters | Description | Default value |
|---|---|---|
|
|
Selector of the element into which information about the loaded file will be displayed | null |
|
|
Maximum upload file size in
kb
|
1024 or
infinity (to disable
file size detection)
|
|
|
Text of the message displayed in
alert if the file
size exceeds the one set in
maxFileSize
|
null |