Submit a form automatically after file selection when using fileinput.js in Jasny Bootstrap

Question

I'm using the fileinput.js feature in Jasny Bootstrap

My aim is to have my form submit automatically after the user has selected a file. I don't want them to have to click on 'submit'.

So far I've tried both JavaScript and jQuery solutions. Both soltuions work very well when not using Jasny's fileinput.js but they don't work when I am using it.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

--

$('#file').change(function() {
  $('#form').submit();
});

How can I make the form submit automatically after the user has selected a file when using Jasny's fileinput.js?

Answer 1

From the Usage section in the docs and the source, it looks like you need to listen for the custom change.bs.fileinput event instead of the native change event. Try something like this:

$('#file').on('change.bs.fileinput', function () {
    $('#form').submit();
});