:file on fileSelect not working within bootstrap modal

Question

I am working on a file select function. They click a button and the file select window pops up where they can select their file and then upload it. This is working perfectly on a regular html page, but as soon as it is placed within a bootstrap modal the :file function stops working.

I tried searching, but only saw instances where the html5 was not working.

Could there be code for the bootstrap modal be preventing this? It's got me stumped.

//This is simply calling the file select method on the button
$('.attachFile').on('change', ':file', function() {
   var input = $(this),
   numFiles = input.get(0).files ? input.get(0).files.length : 1,
   label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
   input.trigger('fileselect', [numFiles, label]);
});


   //On a regular page this works fine, but within the bootstrap modal this is not being called
    $(':file').on('fileselect', function(event, numFiles, label) {
      console.log('I'm in here!!')
     });

The HTML form looks like this

<form enctype="multipart/form-data">
     <label class="btn btn-primary pull-left attachFile">
        <i class="fa fa-paperclip"></i> Attach
        <input name='media' type="file" style="display: none;">
      </label>
</form>

I am not receiving any errors, just silence. And I cannot breakpoint because it's inline script for the modal. (Not what I would prefer, but that was built before me and I can't change it.)

What is the expected result of `numFiles = input.get(0).files ? input.get(0).files.length : 1`? — guest271314, Jan 23 '18 at 21:06
@guest271314, that counts the number of files that have been selected — zazvorniki, Jan 23 '18 at 21:09
`input.get(0).files` will always be "truthy" as `.files` property of `` element is a `FileList` object. — guest271314, Jan 23 '18 at 21:09
@guest271314, ok that part of the code is working though so I kind of don't want to touch something that is working haha — zazvorniki, Jan 23 '18 at 21:10
What does `fileselect` event do? Why do you need to trigger that event? If the code is already "working" what are you trying to achieve? — guest271314, Jan 23 '18 at 21:11
@guest271314, it triggers the event below it. the :file function. It works on a page and not within a modal. I need it to work within the modal. — zazvorniki, Jan 23 '18 at 21:14
I need that event to trigger because it holds the ajax call to upload the file they selected — zazvorniki, Jan 23 '18 at 21:16
Can you reproduce the issue at stacksnippets? Why do you not use `$.ajax()` within `change` event handler? — guest271314, Jan 23 '18 at 21:17

Bunkerbuster · Answer 1 · 2020-01-03T12:26:20.463

I know it is 1 year and 11 months ago, but I walked into the same issue. And I probably used the same example :) ==> https://stackoverflow.com/a/18164555/2910930

Tested: Bootstrap 4, modal, modal has a form what is filled with ajax.

I used "document" as the main selector, so I am sure it works when events change after that data changed using ajax

ps for those in need of custom triggers https://api.jquery.com/trigger/

// We can watch for our custom `fileselect` event like this
$(function () {

    // Use document instead as the start selector
    $(document).on('fileselect',":file", function (event, numFiles, label) {

        var input = $(this).parents('.input-group').find(':text'),
        log = numFiles > 1 ? numFiles + ' files selected' : label;

      if (input.length) {
        input.val(log);
      } else {
        if (log) alert(log);
      }

    });
});


// We can attach the `fileselect` event to all file inputs on the page
$(document).on('change', ':file', function () {
  var input = $(this),
  numFiles = input.get(0).files ? input.get(0).files.length : 1,
  label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
});

:file on fileSelect not working within bootstrap modal

1 Answers1