FileReferenceList: Forcing browse() dialog box to stay on top

This is probably going to be a simple question, but I can't seem to find my answer online after searching.

I am using the following simple code:

var fileReferenceList:FileReferenceList = new FileReferenceList();
fileReferenceList.addEventListener(Event.SELECT, onSelect);
fileReferenceList.browse();

A big flash button triggers this code, which works perfectly fine. Unfortunately, I don't enforce that the button cannot be clicked while the dialog box to browse file is opened, so I get "Error: Error #2041: Only one file browsing session may be performed at a time." if I click on the button while the pop up dialog box is up.

A solution that I really like is the one that Google Docs has. It does not let you click on their but开发者_JS百科ton, above "Select files to upload" while the pop up dialog box is showed. Actually, this dialog box has a sort of priority: You can't click ANYWHERE on the page before you select files or cancel on this dialog box.

I would like to have the same behavior, not let the users click anywhere in my web page until this dialog box is done, just like Google Docs does it, but I can't seem to find how.

Any clue from anyone please?

Thank you very much,

Rudy

---

You should take a look at the HTML file that embeds the SWF. In Windows/Firefox, the behavior of the "select file" dialog will differ depending on what Window Mode (wmode) you use in the EMBED tag in the HTML page.

If you use wmode="opaque" or wmode="transparent", then the "select file" dialog will not be modal, and you'll be able to click on the browser window itself to bring it to the foreground. (Also, you'll be able to minimize and even the browser window). This only seems to apply to Windows/Firefox; other browsers all appear to keep the "select file" dialog on top.

If you omit the wmode attribute (it defaults to "window"), or set it to "direct" or "gpu", then the "select file" dialog will be modal.

Modal "select file" dialog:

<embed src="Upload.swf" 
       wmode="window"
       quality="best" 
       scale="noscale" 
       swliveconnect="true" 
       salign="lt" 
       width="220" height="75" bgcolor="#ffffff" 
       type="application/x-shockwave-flash" 
       pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Non-modal "select file" dialog:

<embed src="Upload.swf" 
       wmode="opaque"
       quality="best" 
       scale="noscale" 
       swliveconnect="true" 
       salign="lt" 
       width="220" height="75" bgcolor="#ffffff" 
       type="application/x-shockwave-flash" 
       pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

---

The Google Docs browse dialog is "modal" (meaning the focus can't go to anything else while the dialog is up). As far as I can tell, the FileReference dialog box should be modal by default. What browser are you testing this in?

As a workaround, you could put a transparent (or semi-transparent, for a dimming effect) overlay over the entire stage while the dialog is up. This won't prevent the focus changing, but it will prevent other buttons on the stage from being clicked. For example a class like this:

public class Overlay extends Sprite
{
    private static const BACKGROUND_OPACITY:Number = 0.40;

    public function Overlay(_stage:Stage)
    {
        graphics.beginFill(0x000000, BACKGROUND_OPACITY);
        graphics.drawRect(0, 0, _stage.stageWidth, _stage.stageHeight);
        graphics.endFill();
    }
}

That would be used like this (from the document class):

private var overlay:Overlay;

public function onButtonClick(e:MouseEvent):void
{
    overlay = new Overlay(stage);
    stage.addChild(overlay);

    // ...

    fileReference.browse();

    // ...
}


public function onSelect(e:Event):void
{
    stage.removeChild(overlay);     // Also do this on cancel, and on errors
}