The following HTML uses Jasny Bootstrap mod fileinput.js

<div class="profile_image">
            <form accept-charset="UTF-8" action="/users/5/update_image" class="edit_user" data-remote="true" enctype="multipart/form-data" id="edit_user_5" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="xx6ELZRrTR6XDzmujIPBsCkr8zbK19I/7CprOOTiblM="></div>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; position: relative;">
                        <img alt="7bbfd77c 1102 4831 9ba8 246fb67460b3.2014 01 17" class="img-responsive" src=".jpg">
                        <div class="choose_new">
                        </div>
                    </div>
                    <div class="btn-file">
                            <input id="user_avatar" name="user[avatar]" type="file">

                    </div>
                </div>
                    <input name="mit" type="submit" value="Submit">
            </form>

        </div>

I want to listen to the change.bs.fileinput event to automatically submit the form once an image is selected

using

$(".fileinput").on("change.bs.fileinput", function(e) {
    e.stopPropagation(); 
    alert();
    return false;
});

Doing this will result in 2 alerts

How can I fix this?

The following HTML uses Jasny Bootstrap mod fileinput.js

<div class="profile_image">
            <form accept-charset="UTF-8" action="/users/5/update_image" class="edit_user" data-remote="true" enctype="multipart/form-data" id="edit_user_5" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="xx6ELZRrTR6XDzmujIPBsCkr8zbK19I/7CprOOTiblM="></div>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; position: relative;">
                        <img alt="7bbfd77c 1102 4831 9ba8 246fb67460b3.2014 01 17" class="img-responsive" src="http://myweb./image.jpg">
                        <div class="choose_new">
                        </div>
                    </div>
                    <div class="btn-file">
                            <input id="user_avatar" name="user[avatar]" type="file">

                    </div>
                </div>
                    <input name="mit" type="submit" value="Submit">
            </form>

        </div>

I want to listen to the change.bs.fileinput event to automatically submit the form once an image is selected

using

$(".fileinput").on("change.bs.fileinput", function(e) {
    e.stopPropagation(); 
    alert();
    return false;
});

Doing this will result in 2 alerts

How can I fix this?

• javascript
• jquery
• html
• forms
• twitter-bootstrap

Share Improve this question Follow edited Dec 5, 2014 at 12:20 Yves M. 31.1k2424 gold badges109109 silver badges149149 bronze badges asked Feb 13, 2014 at 13:49 Nick GinantoNick Ginanto 32.2k4949 gold badges141141 silver badges250250 bronze badges 5

• Have you tried with $('form.edit_user').submit();? – Ram Patidar Commented Feb 13, 2014 at 13:58
• I am experiencing the same issue. Did you manage to find out what was causing it? – mmalmeida Commented Aug 20, 2014 at 17:41
• Note that this only happens after adding the bootstrap-spinner.js file to the page (<script type="text/javascript" src="path/to/bootstrap-fileinput/bootstrap-fileinput.js"></script> ) – mmalmeida Commented Aug 20, 2014 at 18:58
• I think this issue resolved itself when fileinput.js got upgraded. I am using v 3.1.3 at the moment – Nick Ginanto Commented Aug 21, 2014 at 6:52
• Aha Niko! After some hours digging...I reached the same conclusion. I'll answer this question accordingly for future reference. – mmalmeida Commented Aug 21, 2014 at 11:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I believe the question is related to the fileinput's version. Here is a jsfiddle showcasing the issue, using fileinput version 3.0.0-p7 (code below)

If we update the fiddle to version 3.1.3 (http://cdnjs.cloudflare./ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js), then the issue will not manifest itself.

JSFIDDLE SHOWCASE (with JQuery 1.11.0 and the added resource for fileinput-3.0.0-p7):

jQuery(document).ready(function() {
    $('#file-upload').on('change.bs.fileinput', function(event) {
        event.stopPropagation();
        alert("yy");
        console.log(event);
    });
});

<div id="file-upload">
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <span class="btn default btn-file"> <span class="fileinput-new"> SELECT </span> <span class="fileinput-exists"> CHANGE</span> <input id="uploadID"
            type="file" name="upload"> <input type="hidden" id="answerId" value="85009">
        </span> <span class="fileinput-filename"> </span> &nbsp; <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none"> </a>
    </div>
</div>

You can submit a form with the "submit" event instead triggering a "click".

$(".fileinput").on("change.bs.fileinput", function(){
       $("#edit_user_5").submit();
       return false;
}