Skip to content
js-utilities / v2

fileUploadInput

Last updated:

On this page

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>
Documentation
All packages

javaabu/js-utilities

Source on GitHub