0

Working with a JavaScript plugin called fineloader to upload files. My code is below and a live demo is located here. For some reason, the button and input doesn't show using IE7 and my laptop using IE8, but does show using my virtual machine and IE8 as well as IE9/FF/etc. Any help to make it visible would be very appreciated.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fine Uploader - Basic</title>
    </head>
    <style>
        #upload-block {width: 280px;}
        button.gray {
            border:1px solid black;
            color: black;
            height: 25px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="fineuploader-3.1.js"></script>
    <script>
        $(document).ready(function() {
            var uploader = new qq.FineUploaderBasic({button: document.getElementById('uploader')});
        });
    </script>

    <body>
        <div>
            <label>FILE:</label>
            <div id="upload-block">
                <div id="uploader">
                    <input type="text" readonly id="myFilename">
                    <button class="gray">BROWSE</button>
                </div>
            </div>
        </div>
    </body>
</html>
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • Your demo page looks good to me on IE 7. – Jason Towne Dec 19 '12 at 22:28
  • Do you see the input and button? – user1032531 Dec 19 '12 at 22:30
  • Yep, I was able to see both. – Jason Towne Dec 19 '12 at 22:31
  • Well, I am glad it works for you :) It works on my VM IE8, but ont on my other VM IE7 nor my laptop IE8. Strange. IE8 is the exact same version, but some settings are probably different. Is that typical that it works on a given version of IE but differently on different machines? – user1032531 Dec 19 '12 at 22:35
  • I'm not sure to be honest. If it helps, I'm using IE 10 but was "dumbing down" to IE 7 Browser Mode and Document Mode to test your page. – Jason Towne Dec 19 '12 at 22:40
  • I am using IE 9, and have found that their "dumbed down" modes are often not dumb enough, and give very different results. For this example, it shows everything working great which is not the case. – user1032531 Dec 19 '12 at 22:47

2 Answers2

1

Your upload button is a bit odd. Why are providing a div that already has a text input along with a button element as children? Did you know fine uploader also adds a file input element as a child of your button (in this case, #uploader)?

I'd recommend you move the text input elsewhere, though I can't say for sure it's causing a problem for you as all looks well to me. Although, I don't have a real copy of IE8 (I'm using compatibility mode, like other posters here).

I would recommend your upload button option element be modified to look like this instead:

<div id="uploader">
   <div>BROWSE</div>
</div>

And put your text input somewhere else, perhaps as a sibling of #uploader.

Also, don't use a button element at all for your uploader "button". An issue with event delegation in IE will prevent the input child (added by Fine Uploader) from receiving the click event.

Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
1

I'm using fineuploader 3.3, but I believe it's the same problem. Actually, it has nothing to do with your code, but a small bug in a fineuploader code - button is there, it's just not visible :), it can be clicked (below "File" label)

Locate file util.js and lines

/**
 * Sets styles for an element.
 * Fixes opacity in IE6-8.
 */
css: function(styles) {
    if (styles.opacity !== null){
        if (typeof element.style.opacity !== 'string' && typeof(element.filters) !== 'undefined'){

and change to 

/**
 * Sets styles for an element.
 * Fixes opacity in IE6-8.
 */
css: function(styles) {
    if ((styles.opacity !== null) && (typeof styles.opacity !== 'undefined')) {
        if (typeof element.style.opacity !== 'string' && typeof(element.filters) !== 'undefined'){

(only first IF is change, rest of code is here to find it easier)

In your fineuploader-3.1.js, it's a bit harder to find, it's somewhere in the beggining of the file, just carefully change IF code.

ctebah
  • 11
  • 1