1

This is absolutely killing me here. Jasny's wonderful file upload plugin is working fine for me in Chrome but in Firefox and IE clicking the "Select file" button simply does nothing. Actually, in Firefox I get a jquery error message:

[12:18:36.388] Empty string passed to getElementById(). @ https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3

I'm using Bootstrap 2.3.2 and Jasny's bootstrap-fileupload (he seems to have renamed it fileinput now?).

The input seems simple enough:

<div class="fileupload fileupload-new" data-provides="fileupload" data-name="user_profile_picture">
  <div class="input-prepend input-append">
<span class="add-on"><i class="icon-picture"></i></span>
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i><span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="user_profile_picture"></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>

</div>
</div>

I'm sure I'm including the javascript and css fine (or it wouldn't work in Chrome). I've tried removing as much as possible from the page on the chance that this is due to an error with something else out there. There are no other 'fileupload' elements on the page. I've tried removing validation from the form. I've also tried firing the fileupload with javascript:

// handle our file uploader
$('.fileupload').fileupload({
    'name': 'user_profile_picture'
});

To no avail.

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
Matt Brunmeier
  • 1,310
  • 2
  • 11
  • 22

1 Answers1

0

Well, after much obnoxious tweaking, I discovered that one of my css files was causing it to not work in Firefox (how?)

The only thing in the css file that could pertain was a setting for:

input {
max-width: 100%; 
}

I added

.fileupload input {
max-width: none;
}

and the problem has gone away. Color me confused.

Matt Brunmeier
  • 1,310
  • 2
  • 11
  • 22