Skip to main content

fileUploadInput

This module includes functionality for ajax upload and deletion for file inputs. This module is best used with jasny-bootstrap fileinput.js script. To use this module, import and initialize it. This module requires SweetAlert2 and bootstrap-notify.

import { fileUploadInput } from '@javaabu/js-utilities';

fileUploadInput.init();

You can also manually bind fileUploadInput on an arbitary element using the bind() method. The argument to the bind() method must be a jQuery object. This can be useful for binding postLinks on dynamic elements.

import { fileUploadInput } from '@javaabu/js-utilities';

fileUploadInput.bind($('.some-element'));

data-provides="fileinput-upload"

Enables ajax upload of files for file inputs. Must be used inside a form element. Should have a file input, .btn-file, .upload-btn and a data-dismiss="fileinput" inside the element. This feature supports the following data attributes:

  • data-max-file-size: The maximum file size allowed in KB. Defaults to 2 MB.
<x-forms::form files>
<div class="fileinput fileinput-new" data-provides="fileinput-upload" data-max-file-size="1024">
<div>
<span class="btn btn-info btn-file mb-1 ">
<span class="upload-btn btn--icon-text">
<i class="zmdi zmdi-upload"></i>&nbsp;
Upload File
</span>
<input type="file" name="registry" accept="text/plain" />
</span>
<a href="#" class="mb-1 btn btn-danger fileinput-exists btn--icon-text" data-dismiss="fileinput">
<i class="zmdi zmdi-close"></i> Remove
</a>
</div>
</div>
</x-forms::form>