Filepond
Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example accepts a maximum of 3 files shown in a single item row.
<div class="filepond-uploader">
<div class="control">
<input type="file" class="filepond" name="filepond" multiple
data-allow-reorder="true" data-max-file-size="3MB" data-max-files="3">
</div>
</div>
//Register Filepond plugin (once)
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize,
FilePondPluginImageEdit
);
//Instanciate element
FilePond.create(
document.querySelector('.filepond'),
);
Filepond Two Grid
Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example accepts a maximum of 3 files shown in a 2 items row.
<div class="filepond-uploader is-two-grid">
<div class="control">
<input type="file" class="filepond" name="filepond" multiple
data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
</div>
</div>
//Instanciate element
FilePond.create(
document.querySelector('.filepond-2-grid'),
);
Filepond Three Grid
Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example accepts a maximum of 3 files shown in a 3 items row.
<div class="filepond-uploader is-three-grid">
<div class="control">
<input type="file" class="filepond" name="filepond" multiple
data-allow-reorder="true" data-max-file-size="3MB" data-max-files="8">
</div>
</div>
//Instanciate element
FilePond.create(
document.querySelector('.filepond-3-grid'),
);
Profile Filepond
Huro is integrated with Filepond, a performant vanilla javascript uploader library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The following example is fit for profile image upload (1:1 ratio).
<div class="filepond-profile-wrap is-tiny">
<input type="file" class="profile-filepond-tiny" name="profile_filepond_tiny"
accept="image/png, image/jpeg, image/gif">
</div>
<div class="filepond-profile-wrap is-small">
<input type="file" class="profile-filepond-small" name="profile_filepond_small"
accept="image/png, image/jpeg, image/gif">
</div>
<div class="filepond-profile-wrap">
<input type="file" class="profile-filepond" name="profile_filepond"
accept="image/png, image/jpeg, image/gif">
</div>
//Example for the bigger one (Refer to assets/js/components.js for the others)
FilePond.create(
document.querySelector('.profile-filepond'),
{
labelIdle: `<i class="lnil lnil-cloud-upload"></>`,
imagePreviewHeight: 140,
imageCropAspectRatio: '1:1',
imageResizeTargetWidth: 140,
imageResizeTargetHeight: 140,
stylePanelLayout: 'compact circle',
styleLoadIndicatorPosition: 'center bottom',
styleProgressIndicatorPosition: 'right bottom',
styleButtonRemoveItemPosition: 'left bottom',
styleButtonProcessItemPosition: 'right bottom',
}
);
Square Filepond
Huro is integrated with Notyf, a dead simple vanilla javascript toasting library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the assets/js/components.js file. The success toast is one the 2 notyf default toasts.
<div class="filepond-square-wrap is-tiny">
<input type="file" class="square-filepond-tiny" name="square_filepond_tiny"
accept="image/png, image/jpeg, image/gif">
</div>
<div class="filepond-square-wrap is-small">
<input type="file" class="square-filepond-small" name="square_filepond_small"
accept="image/png, image/jpeg, image/gif">
</div>
<div class="filepond-square-wrap">
<input type="file" class="square-filepond" name="square_filepond"
accept="image/png, image/jpeg, image/gif">
</div>
//Example for the bigger one (Refer to assets/js/components.js for the others)
FilePond.create(
document.querySelector('.square-filepond'),
{
labelIdle: `<i class="lnil lnil-plus"></>`,
imagePreviewHeight: 140,
imageCropAspectRatio: '1:1',
imageResizeTargetWidth: 140,
imageResizeTargetHeight: 140,
stylePanelLayout: 'compact circle',
styleLoadIndicatorPosition: 'center bottom',
styleProgressIndicatorPosition: 'right bottom',
styleButtonRemoveItemPosition: 'left bottom',
styleButtonProcessItemPosition: 'right bottom',
}
);