plupload only working with html5 in wordpress plugin

Looking for help with using plupload in a wordpress plugin (front-end, not admin).

I have it all working with html5, but if the browser does not support html5 (ie. IE), then it should switch to flash, silverlight, etc in theory, but it’s not. I have tried justing putting flash in the runtimes, but then it just fails to initialise (presumably as the browser is trying, and failing, to use html5), after a little while with error -500.

Read More

Maybe important, but the JS is run after the upload form is displayed in a return from AJAX. But as I say, all working lovely with html5, but the switch to flash, etc isn’t happening.

So I think that the problem is why it doesn’t fallback to flash, etc.

Some code snippets follow with file references.

I am loading the plupload script as follows:

wp_enqueue_script('plupload-all');

The HTML form is:

echo '<div class="uploader" id="symposium_activity_uploader" style="display:none">';
  echo '<a id="pickfiles" href="#">Attach an image</a>';
  echo '<div id="progressbar"></div>';
echo '</div>';
echo '<div id="symposium_filelist" class="cb"></div>';

The JS that is run when the DOM includes the HTML form is:

// Settings ////////////////////////////////////////////////
var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,gears,html4', 
    flash_swf_url : '/wp-includes/js/plupload/plupload.flash.swf',
    silverlight_xap_url : '/wp-includes/js/plupload/plupload.silverlight.xap',
    browse_button : 'pickfiles', 
    max_file_size : '1mb', 
    urlstream_upload : true, 
    multipart : true,
    multi_selection: false, 
    resize : {width : 300, height : 300, quality : 90}, 
    container : 'symposium_activity_uploader', 
    url : '/wp-content/plugins/wp-symposium/ajax/dothisnext.php', 
    filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] 
});

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

// Init ////////////////////////////////////////////////////
uploader.init(); 

// Selected Files //////////////////////////////////////////
uploader.bind('FilesAdded', function(up, files) {
    jQuery.each(files, function(i, file) {
        jQuery('#symposium_filelist').append('<div class="addedFile" id="' + file.id + '">' + file.name + '</div>');
    });
    up.refresh(); 
    uploader.start();
});

// Error Alert /////////////////////////////////////////////
uploader.bind('Error', function(up, err) {
    alert("Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");
    up.refresh(); 
});

// Progress bar ////////////////////////////////////////////
uploader.bind('UploadProgress', function(up, file) {
    var progressBarValue = up.total.percent;
    jQuery('#progressbar').fadeIn().progressbar({
        value: progressBarValue
    });
    jQuery('#progressbar .ui-progressbar-value').html('<span class="progressTooltip">' + up.total.percent + '%</span>');
});

// Close window after upload ///////////////////////////////
uploader.bind('UploadComplete', function() {
    jQuery('.uploader').fadeOut('slow');
});

The paths to flash_swf_url and silverlight_xap_url have been manually verified.

I have not posted the code that receives the upload image, as this is working, and is referred to above as dothisnext.php.

So in summary, my question is that whilst html5 is working, the runtime is not switching to flash,silverlight,etc for browsers that don’t support html5. Am I missing an important step?

Related posts

Leave a Reply