Uploadify doesnt fire uploadifyUpload/uploadifyClearQueue

[Sumit]

I am having a problem firing the uploadifyUpload and uploadifyClearQueue function from within a modal jquery.ui dialog. The uploadifyCancel doesnt fire also.
Ive tested under FF 3.0.13 and it works as expected. However in IE 6.0.2900 (my intended intranet browser) the functions dont fire.
I dont get a script error, just nothing happens. I dont have this problem if I dont use a modal dialog.

I changed the auto setting for uploadify to true, and the upload begins automatically in both IE and FF, but that is not per design.

Any help?

Also, Ive noticed that if I call the dialog more than once, I have multiple upload buttons.
How can I cleanly reset the uploadify element before launching my dialog?

WinXP
Local - Dev Server
Uploadify 2.1


I call fnShowUpload() when I want to display the modal upload dialog. This is not done at document.ready, but at a click event.

Code: Select all

   function fnShowUpload(){


      $("#dialogUpload").dialog({
         bgiframe: true,
         autoOpen: false,
         height: 300,
         width: 250,
         modal: true,
         buttons: {
            'Upload Files': function() {
               alert('upload'); //this fires
               $("#multiUpload").uploadifyUpload(); //nothing happens
               
            },
            'Clear Queue': function() {
               alert('clear'); //this fires
               $("#multiUpload").uploadifyClearQueue(); //nothing happens
            },
            'Cancel': function() {
               $(this).dialog('close');
            }
         },
         close: function() {
         }
      });


      $("#multiUpload").uploadify({
         "uploader"       : "<s:url value='/js/jquery/uploadify/uploadify.swf'/>",
         "script"         : "<s:url value='jsonUploadMultiple.action'/>",
         "cancelImg"      : "<s:url value='/js/jquery/uploadify/cancel.png'/>",
         "folder"         : "<s:url value='/documents'/>",
         "multi"          : true,
         "auto"          : false,
         "scriptAccess"    : "always"                     
      });


        $("#dialogUpload").dialog("open");

   }



This is my dialog/uploadify markup.

Code: Select all

    <div id="dialogUpload" title="Upload New Files" style="display:none">
         <input type="file" id="multiUpload" name="multiUpload"/>         
   </div>



Thanks for any help.

Sumit

[Jon.Armstrong]

I would like to draw attention to this bug as I believe that I've been slamming my head into this one for a while. This is the scenario that I've come across

Start IE6 fresh (no other processes of it running)
go to website with upload modal on it
display the modal that has the uploadify flash movie
uploadify WILL work correctly
close the modal / reload the page
display the modal that has the uploadify flash movie
uploadify WILL NOT work correctly

What I've been able to determine
<flashmovieobj>.startFileUpload
<flashmovieobj>.updateSettings
<flashmovieobj>.cancelFileUpload
<flashmovieobj>.clearFileUploadQueue
all get the typeof object in javascript, they loose their function type.
so calling will display "object" instead of "function"

Code: Select all

alert('StartFileUpload:' + typeof (document.getElementById(jQuery(event.target).attr('id') + 'Uploader').startFileUpload))

This is flash version independent, v9 and v10 both experience this problem. Trying to clean up the flash movie with swfobject.removeSWF(<flashmovieobj>) correctly nulls the javascript parameters in memeory, but checking the typeof the functions after re-building the flashmovie has them set up as objects again, instead of functions.

As far as I can tell, this has something to do with using the jqueryUI to make a modal of the uploadified elements. If I build a static page that has the uploadfied elements (like the demo) and it will work consistently across page refreshes. Anyone have any advice for how they have gotten uploadify to work consistently with modals?

[Sumit]

Regarding clearing uploadify for a dialog.
I found this solution on the forum.

This is my new dialog function

Code: Select all

   function fnShowUpload(){

//added this
      $('#multiUploadUploader').remove();
      
      $("#dialogUpload").dialog({
         bgiframe: true,
         autoOpen: false,
         height: 400,
         width: 450,
         modal: true,
         buttons: {
            'Close': function() {
               $(this).dialog('close');
            }
         },
         close: function() {

            $(this).dialog('destroy');

//added this

            $("#uploadForm").replaceWith('<form id="uploadForm"><center><span>Please browse to up 20 files to upload</span><br><span>Hold down the "Ctrl" key to select more than one file</span><br><span>The upload will begin after you have selected your files</span><br><span>Please do not close this window until all files have completed uploading</span><br><br><input type="file" id="multiUpload" name="theFile"/></center></form>');

         }
      });


      $("#multiUpload").uploadify({
         "uploader"       : "<s:url value='/js/jquery/uploadify/uploadify.swf'/>",
         "script"         : "<s:url value='jsonUploadMultiple.action'/>",
         "cancelImg"      : "<s:url value='/js/jquery/uploadify/cancel.png'/>",
         "folder"         : "<s:url value='/documents'/>",
         "multi"          : true,
         "auto"          : true,
         "fileDataName"    : "theFile",
         "scriptData"     : {"folderId" : $("#theTree").dynatree("getActiveNode").data.key},
         "onError"       : uploadifyError,
         "scriptAccess"    : "always"                     
      });


        $("#dialogUpload").dialog("open");

   }



I added

Code: Select all

      $('#multiUploadUploader').remove();


to the beginning of the function.

And I added

Code: Select all

            $("#uploadForm").replaceWith('<form id="uploadForm"><center><span>Please browse to up 20 files to upload</span><br><span>Hold down the "Ctrl" key to select more than one file</span><br><span>The upload will begin after you have selected your files</span><br><span>Please do not close this window until all files have completed uploading</span><br><br><input type="file" id="multiUpload" name="theFile"/></center></form>');



To the dialog close

where my markup looks like this.

Code: Select all

    <div id="dialogUpload" title="Upload New Files" style="display:none">
      <form id="uploadForm">
         <center>
         <span>Please browse to up 20 files to upload</span><br>
         <span>Hold down the "Ctrl" key to select more than one file</span><br>
         <span>The upload will begin after you have selected your files</span><br>
         <span>Please do not close this window until all files have completed uploading</span><br>
         <br>
         <input type="file" id="multiUpload" name="theFile"/>         
         </center>
      </form>
      
   </div>


I've found this lets me reuse uploadify in a modal dialog.
I intend to save the content of the upload form before you create the dialog in a variable
and then just use that variable to fill it back in.
But I'm not yet to cleaning up my code...

Hope that helps.

Now, if anyone has any ideas how to get the upload and clearqueue methods to fire in a dialog, that would be greatly appreciated. Again the problem is only with IE, not FF. And I've updated my local verion of flash, so it cant be that.

[RafaPolit]

I have stumbled with this same issue:
I cannot call the uploadifyUpload() or the uploadifyClearQueue() within a dialog window of the jQuery UI in IE though FF and Chrome work OK.

Is there any known fix for this? I would hate to re-program everything without the nice floating dialogs I have spent so much time implementing into the WebPage.

Thanks,
Rafa.

[Dawaz]

Hi,
i don't know if you still have this problem but i think i've found the solution for my problem, and it seems to be the same as yours.
The fact is that IE works bad with flash and jQuery dialog, flash files moving are not appreciate in our M$ wonderful browser...

The tip to make it work, is always to generate the dialog box before the flash files ( so before your uploadify instance ).

so instead of doing :

$(x).uploadify(....);
$(y).dialog(...);

you need to do this:
$(y).dialog(...);
$(x).uploadify(....);

So that he generates the container ( the dialg box ) then he makes the flash work ( instead of putting it in after )

[Rapid-eraser]

I have the same problem when trying to push the list inside a ui.dialog.

If you try to upload something before trying to empty the list or cancel both functions work ,
but if you try to cancel something you get this error from AS

Code: Select all

TypeError: Error #1010: A term is undefined and has no properties.
   at uploadify_fla::MainTimeline/uploadify_cancelFileUpload()
   at Function/http://adobe.com/AS3/2006/builtin::apply()
   at flash.external::ExternalInterface$/_callIn()
   at <anonymous>()


Let me point that FF crashed at least 4-5 times while doing my tests probably from the flash ...