YUI Uploader se bloque après avoir choisi le fichier

Question

Voici l'intégralité de mon code d'un contrôle utilisateur qui contient le téléchargeur YUI. Y a-t-il quelque chose qui me manque? À l'heure actuelle, lorsque je parcours le code javascript dans Firebug, il se bloque sur la première ligne de la fonction upload(). J'ai un point d'arrêt sur la première ligne de l'ashx qui gère le fichier, mais il n'est jamais appelé. Donc, ça ne va pas si loin. Je me dis qu'il me manque quelque chose de stupide. J'ai utilisé ce contrôle plusieurs fois auparavant sans problèmes. J'utilise tous les fichiers CSS et graphiques fournis par le dossier des échantillons dans le téléchargement YUI.

Si je ne manque rien, existe-t-il un moyen plus complet de déboguer ce problème, puis de passer en revue le javascript avec FireBug. J'ai essayé d'activer et de désactiver la journalisation pour YUI et je n'ai jamais reçu de journaux. Je ne suis pas sûr où aller maintenant.

<style type="text/css"> 
    #divFile 
    { 
     background-color:White; 
     border:2px inset Ivory; 
     height:21px; 
     margin-left:-2px; 
     margin-right:9px; 
     width:125px; 
    } 
</style> 
<ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="rceContainer" TargetControlID="pnlMMAdmin" /> 
<asp:Panel ID="pnlMMAdmin" runat="server" 
Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> 
<div style="padding: 5px; text-align:center; width: 100%;"> 

<table style="width: 100% ; border: none; text-align: left;"> 
    <tr> 
    <td style="width: 460px; vertical-align: top;"> 
     <!-- information panel --> 
     <ajaxToolkit:RoundedCornersExtender runat="server" Corners="All" Radius="6" ID="RoundedCornersExtender1" TargetControlID="pnlInfo" /> 
     <asp:Panel ID="pnlInfo" runat="server" 
     Width="100%" BackColor="Silver" ForeColor="#ffffff" Font-Bold="true" Font-Size="16px"> 
     <div id="infoPanel" style="padding: 5px; text-align:left; width: 100%;"> 
     <table> 
     <tr><td>Chart</td><td> 
     <table><tr><td><div id="divFile" ></div></td><td><div id="uploaderContainer" style="width:60px; height:25px"></div></td></tr> 
     <tr><td colspan="2"><div id="progressBar"></div></td></tr></table> 
</td></tr> 

    </table> 

</div></asp:Panel> 
<script type="text/javascript" language="javascript"> 
    WYSIWYG.attach('<%= txtComment.ClientID %>', full); 
    var uploader = new YAHOO.widget.Uploader("uploaderContainer", "assets/buttonSkin.jpg"); 
    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); 
    function handleContentReady() { 
     // Allows the uploader to send log messages to trace, as well as to YAHOO.log 
     uploader.setAllowLogging(false); 

     // Restrict selection to a single file (that's what it is by default, 
     // just demonstrating how). 
     uploader.setAllowMultipleFiles(false); 

     // New set of file filters. 
     var ff = new Array({ description: "Images", extensions: "*.jpg;*.png;*.gif" }); 

     // Apply new set of file filters to the uploader. 
     uploader.setFileFilters(ff); 
    } 
    var fileID; 
    function onFileSelect(event) { 
     for (var item in event.fileList) { 
      if (YAHOO.lang.hasOwnProperty(event.fileList, item)) { 
       YAHOO.log(event.fileList[item].id); 
       fileID = event.fileList[item].id; 
      } 
     } 
     uploader.disable(); 

     var filename = document.getElementById("divFile"); 
     filename.innerHTML = event.fileList[fileID].name; 

     var progressbar = document.getElementById("progressBar"); 
     progressbar.innerHTML = "Please wait... Starting upload.... "; 
     upload(fileID); 
    } 
    function upload(idFile) { 
     // file hangs right here. ************************** 
     progressBar.innerHTML = "Upload starting... "; 
     if (idFile != null) { 

      uploader.upload(idFile, "AdminFileUploader.ashx", "POST"); 
      fileID = null; 
     } 
    } 
    function handleClearFiles() { 
     uploader.clearFileList(); 
     uploader.enable(); 
     fileID = null; 

     var filename = document.getElementById("divFile"); 
     filename.innerHTML = ""; 

     var progressbar = document.getElementById("progressBar"); 
     progressbar.innerHTML = ""; 
    } 
    function onUploadProgress(event) { 
     prog = Math.round(300 * (event["bytesLoaded"]/event["bytesTotal"])); 
     progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>"; 

     var progressbar = document.getElementById("progressBar"); 
     progressbar.innerHTML = progbar; 
    } 
    function onUploadComplete(event) { 
     uploader.clearFileList(); 
     uploader.enable(); 

     progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>"; 
     var progressbar = document.getElementById("progressBar"); 
     progressbar.innerHTML = progbar; 
     alert('File Uploaded'); 
    } 

    function onUploadStart(event) { 
     alert('upload start'); 
    } 

    function onUploadError(event) { 
     alert('upload error'); 
    } 

    function onUploadCancel(event) { 
     alert('upload cancel'); 
    } 

    function onUploadResponse(event) { 
     alert('upload response'); 
    } 

</script> 

Answer 1

Il semble qu'il y ait un décalage de cas au nom de la variable progressbar: vous faites référence comme partout ailleurs barre de progression, mais comme progressBar dans la fonction de téléchargement().

Un problème encore plus important est que vous définissez la variable de la barre de progression dans la fonction onFileSelect. Pour cette raison, la portée est limitée et ne devrait être accessible nulle part ailleurs.

Voyez si vous déplacez la définition de la barre de progression (ou si vous l'extrayez du DOM partout où elle est utilisée en utilisant getElementById) et si vous corrigez la non-concordance des cas, cela résoudra vos problèmes.

Answer 2

YUI 2.8 a des problèmes avec les événements et l'uploader. Cela ne fonctionnera pas à moins d'utiliser l'événement 2.9 et l'uploader. J'ai perdu plus de temps que je ne veux l'admettre en essayant de faire fonctionner 2.8. J'espère que cela sauve quelqu'un à ce moment-là.