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

Question

Hello all,

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 button, 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

Answer 1

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
}