(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

Disclaimer: I have never used the YUI Uploader, my answer is based on my understanding of the YUI Uploader documentation and checking the demo you referenced.

I assume that you defined the scripts required by the YUI Uploader:

<!-- Dependencies --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt; 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"&gt;&lt;/script&gt; 

<!-- Source files --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/uploader/uploader-min.js"&gt;&lt;/script&gt;

The code you show looks fine, so I assume that the error lies in something that you are not showing. A wild guess:

• Have you defined all the functions you use? The functions handleContentReady, onFileSelect, onUploadStart, onUploadProgress, onUploadCancel, onUploadComplete, onUploadResponse, onUploadError and upload are not shipped with the YUI Uploader library. They have been defined in the demo, and you have to adapt/write your own functions calling the YUI Uploader code in a similar way

In addition, the YUI Loader seems to implement its own 'contentReady' detection, similar to jQuery(document).ready(...). I noticed that in the demo, the listeners are set up in a script loaded in the document, before the contentReady event happens. In your code, it might be too late for the YUI Loader since the event already happened according to jQuery detection... Try calling initYUIUpload() outside jQuery(document).ready(...).

Answer 2

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 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.

Answer 4

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.