Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

plupload bug in IE10 with html5 runtime with colorbox #788

Closed
marcandre opened this issue May 8, 2013 · 3 comments
Closed

plupload bug in IE10 with html5 runtime with colorbox #788

marcandre opened this issue May 8, 2013 · 3 comments

Comments

@marcandre
Copy link

plupload will not work under certain conditions. Here is a sure fire way to illustrate it:

  1. use IE 10
  2. use the html5 runtime
  3. open a colorbox
  4. initialize plupload for an area of the dialog

Clicking on the [select files] will not do anything.

It's a hard to track bug because no error/warning appears in the console and that all 4 conditions are needed:

  1. Using Safari/Firefox/Chrome instead of IE10 works.
  2. Alternatively if using IE 10 but with the flash runtime instead of the html5 runtime, that works too.
  3. Or remove the colorbox, and that works.
  4. The best way to circumvent this is to do 4) before 3) and that works too.

I did not investigate what particular operation in colorbox makes things go haywire down the line for plupload. I'm just glad I found some simple conditions to reproduce it and hope you can figure out what's going on :-)

Here's your custom example slightly modified to use colorbox and show the problem in action:

https://gist.github.com/marcandre/5537937
@jayarjo
Copy link
Contributor

jayarjo commented Jul 8, 2013

You need to wait until Plupload is initialized at least, before you try to open it in colorbox. Also be sure to call refresh() on uploader every time it opens - just in case. For example something like this should work just fine:

<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="http://www.plupload.com/plupload/js/plupload.full.js"></script>
<script type="text/javascript" src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>

</head>
<body>
<h3>Custom example</h3>
<a class='inline' href="#container">colorbox</a>
<div id="container">
    <div id="filelist">No runtime found.</div>
    <br />
    <a id="pickfiles" href="#">[Select files]</a>
    <a id="uploadfiles" href="#">[Upload files]</a>
</div>
<script type="text/javascript">
// Custom example logic
$(function() {

    var uploader = new plupload.Uploader({
        runtimes : 'html5,flash,silverlight,browserplus',
        browse_button : 'pickfiles',
        container : 'container',
        max_file_size : '10mb',
        url : 'upload.php',
        flash_swf_url : '/plupload/js/plupload.flash.swf',
        silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ],
        resize : {width : 320, height : 240, quality : 90}
    });

    uploader.bind('Init', function(up, params) {
        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    uploader.bind('PostInit', function(up) {
        $(".inline").colorbox({
            inline:true, 
            width:"50%",
            onComplete: function() {
                up.refresh();
            }
         }).click();
    });

    $('#uploadfiles').click(function(e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.init();

    uploader.bind('FilesAdded', function(up, files) {
        $.each(files, function(i, file) {
            $('#filelist').append(
                '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
            '</div>');
        });

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('UploadProgress', function(up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
    });

    uploader.bind('Error', function(up, err) {
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function(up, file) {
        $('#' + file.id + " b").html("100%");
    });

});
</script>
</body>
</html>

The fact that it works in other browsers is not an excuse in this case. Maybe undesired, but definitely expected behavior, so - not a bug.

@jayarjo jayarjo closed this as completed Jul 8, 2013
@jayarjo jayarjo mentioned this issue Jul 22, 2013
Closed
@thejdeep-tj
Copy link

Hi Jay, you mean I need to use Plupload script before my colorbox plugin ??

@phamtuquy
Copy link

Add "html4" to properties "runtimes"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@marcandre @jayarjo @phamtuquy @thejdeep-tj