SWFUpload v2.2.0.1 で「Exception: Error: Error #2176」

SWFUpload
http://swfupload.org/

久しぶりに SWFUpload を使用する要件があったので、最新の SWFUpload v2.2.0.1 で以前弄っていたサンプルを動かそうとしたところ、JavaScriptエラーが発生して SWFUpload オブジェクトの初期化に失敗するようになっていました。

Firefox + Firebug で追ってみると、「Could not find the placeholder element」というエラーが発生しているようです。
どうも設定で「button_placeholder_id」と「button_placeholder」がどちらも設定されていない場合にこのエラーが起きてしまう模様。

とりあえず「button_placeholder_id」に適当な div 要素の id を指定したところ、SWFUpload の初期化自体は通るようになったのですが、今度はファイル選択ボタンをクリックしたところで、SWFUpload の debug ウィンドウに「Exception: Error: Error #2176」の文字が。

エラーメッセージをそのまま Google で検索すると、公式サイトフォーラム内の以下の記事が見つかりました。

SWF DEBUG: Exception: Error: Error #2176 | SWFUpload
http://swfupload.org/forum/generaldiscussion/1101

どうやら FlashPlayer 10 から、Flash で生成したボタンからでないとファイル選択ダイアログが開けなくなった、という事のようです。
以前書いたサンプルでは、以下のように HTML の「input type="button"」のボタンクリック時に JavaScript で SWFUpload オブジェクトの selectFilesメソッドを呼んでいたため動作しなくなっていた、という事みたいですね。

<input type="button" value='選択' onclick="swfu.selectFiles();" />

ドキュメントを良く読んでみると 2.2.0 から Flash ボタンを生成するために以下のような設定項目が追加されていました。

設定名	意味
button_placeholder_id	ボタンを生成するプレースホルダーとなる DOM 要素の ID。
button_placeholder	ボタンを生成するプレースホルダーとなる DOM 要素。
button_image_url	ボタン画像の URL。SWF ファイル、または gif, jpg, or png 形式の画像を指定する。ボタン画像は縦に上から通常時、ホバー時、クリック時、無効時、と 4 つの画像を並べて作成する事が出来、それによりアクション時に見た目を変更する事ができる。それぞれのボタンを切り替えるための高さの表示範囲は button_height で指定する。ボタンのサンプル画像は Samples アーカイブ内の samples\buttons 内にある。
button_width	ボタンの幅。
button_height	ボタンの高さ。
button_text	ボタンの上に描画する文字列。
button_text_style	ボタンの上に描画する文字列のスタイル。
button_text_top_padding	ボタンの上に表示する文字列の上下の位置を調整する。
button_text_left_padding	ボタンの上に表示する文字列の左右の位置を調整する。
button_action	ボタンがクリックされた時のアクションを指定する。指定可能な値は swfupload.js 内の SWFUpload.BUTTON_ACTION で定義されている。
button_disabled	ボタンを無効にするかどうかを真偽値で指定する。
button_cursor	ボタンの上にマウスカーソルが来た際のカーソルの種類を指定する。指定可能な値は swfupload.js 内の SWFUpload.CURSOR で定義されている。
button_window_mode	Flash の WMODE プロパティを指定する。指定可能な値は swfupload.js 内の SWFUpload.WINDOW_MODE で定義されている。

Flash ボタン用の設定を追記し、以下のような感じで SWFUpload オブジェクトの初期化部分のコードを書き換えたところ、無事複数選択可のファイル選択ダイアログが使用できるようになりました。

<script type="text/javascript">
<!--
  var swfu = null;
  window.onload = function () {  
    swfu = new SWFUpload({
      upload_url:"<%= url_for :controller => :posts, :action => :upload, :only_path => false %>",
      flash_url:"http://localhost:3000/swfupload.swf",
      upload_complete_handler: function(file) {
        if (this.getStats().files_queued != 0) this.startUpload(); 
      },
      file_post_name: 'image_file',
      file_types: '*.jpg;*.gif;*.png',
      file_types_description: '画像ファイル',
      file_upload_limit: 4,
      file_queue_limit: 4,
      button_placeholder_id: 'filechooser',
      button_image_url: 'http://localhost:3000/images/button.png',
      button_width: 61,
      button_height: 22,
      button_text:'選択',
      button_text_style: 'color: #FF0000; font-size: 16pt;',
      button_cursor: SWFUpload.CURSOR.HAND,
      button_action: SWFUpload.BUTTON_ACTION.SELECT_FILES,
      button_disabled: false,
      
      debug: true
    });
  }
//-->
</script>
<span id="filechooser" class="swfupload"></span>
<input type="button" value='アップロード' onclick="swfu.startUpload();" />

値の指定方法が悪いのか、「button_text_style」が何故か効いていないようなのですが、それ以外は上手く動作してくれているみたいです。