(YUI uploader) listeners not fiering events

Question

I'm trying to use YUI uploader, but I'm not able to open the file dialog window when I click the browse button. I'm following (more or less) the example on Yahoos demo.

Here is my HTML code:

<div id="fileProgress">
  <input id="fileName" type="text" size="40" />
  <input id="uploaderUI" name="uploaderUI" class="submitButton" type="button" value="Browse" />
  <input id="uploadFile" name="uploadFile" class="submitButton" type="button" value="Upload" />
    <div id="progressBar"></div>
</div> 

And here is my javasctips code:

jQuery(document).ready(function() {
    initYUIUpload();
});

  function initYUIUpload()
  {
    YAHOO.widget.Uploader.SWFURL = "wp-includes/js/yui/assets/uploader.swf";  
    var uploader = new YAHOO.widget.Uploader("uploaderUI");

    uploader.addListener('contentReady', handleContentReady);
    uploader.addListener('fileSelect',onFileSelect)
    uploader.addListener('uploadStart',onUploadStart);
    uploader.addListener('uploadProgress',onUploadProgress);
    uploader.addListener('uploadCancel',onUploadCancel);
    uploader.addListener('uploadComplete',onUploadComplete);
    uploader.addListener('uploadCompleteData',onUploadResponse);
    uploader.addListener('uploadError', onUploadError);

    jQuery('#uploadFile').click(function(){ upload() });            
  }

UPDATE
I "gave up" using YUI uploader, and I'm using Uploadify now.

Answer 1

I think it might have something to do with this note from the YUI Uploader page:

Because of security changes in the upcoming Flash Player 10, the UI for invoking the "Browse" dialog has to be contained within the Flash player. Because of that, this new version of the Uploader is NOT BACKWARDS COMPATIBLE with the code written to work with the previous version (it is, however, compatible with Flash Player 9). Do not upgrade to this version without carefully reading the documentation and reviewing the new examples.

This means instead of calling your upload function directly from the <input> button, you have to create another <div> which will contain the transparent Flash overlay created by YUI uploader.

See the example from the YUI site:

 <div id="uiElements" style="display:inline;">
        <div id="uploaderContainer">
            <div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
            <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
        </div>
        <div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload Files</a></div>
</div>

<script type="text/javascript">

 YAHOO.util.Event.onDOMReady(function () { 
    var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
    var overlay = YAHOO.util.Dom.get('uploaderOverlay');
    YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
    YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
    });

</script>

Answer 2

ok normally when happend that the concern is about the swf file, cause is this file who open the dialog not JAVASCRIPT, so you have to download the file and put in you server you can't access directly in the yahoo site.

also you can use this dependency

best Nahum

PS. My first time using yui upload had the same problem.

Answer 3

I had this exact same problem.

There is a bug with the 2.8 version of uploader.swf

If you had the same problem as me, than switching to the 2.7 version of uploader.swf will make your events fire as expected.