ファイルをOCIオブジェクト・ストレージにアップロードする画面を作成します。
ファイルをアップロードするダイアログ画面の作成
まず、空のページを作成します。開発中のアプリケーションのホームより、ページの作成を実行します。
ページ・タイプはコンポーネントを選んで、空白ページを作成します。アイコンをクリックするか、選択して次へ進みます。
ページ番号は２(必ず２にしてください。後続のページ・アイテム名などに影響します)、名前はFile Upload、ページ・モードはモーダル・ダイアログを指定して、ページの作成をクリックします。モーダル・ダイアログなので、ブレッドクラム、ナビゲーションはOFFのままにします。
Content BodyにタイトルをFile Upload、タイプが静的コンテンツのリージョンを追加します。
Dialog FooterにタイトルをButtons、タイプが静的コンテンツのリージョンを追加します。外観/テンプレートとして、Buttons Containerを選択します。
File Uploadとして作成したリージョンに、タイプが非表示のページ・アイテムP2_BUCKET_NAMEを追加します。
次にタイプがファイル参照...であるページ・アイテムP2_FILEを追加します。記憶タイプはTable APEX_APPLICATION_TEMP_FILESとなっていることを確認します。ラベルはFileとします。
同様にボタンCANCELも作成します。識別のボタン名をCANCEL、識別のラベルをCancel、そしてこちらの動作のアクションは動的アクションで定義を指定します。
ボタンCANCELに動的アクションを定義します。レンダリング・ツリーのCANCELボタンの上でコンテキスト・メニューを表示させ、そのメニューから動的アクションの作成を実行します。
動的アクションの識別/名前は任意の値でかまわないのですが、ここではClick CANCELを指定します。タイミングはデフォルトで(CANCELボタンのコンテキスト・メニューから動的アクションを作成したため)、イベントはクリック、選択タイプはボタン、ボタンはCANCELとなっているはずですが、確認してください。
実行するTrueアクションとして、ダイアログを取り消すを選択します。
左ペインにてプロセス・ビューの表示を選択し、プロセス・ビューのプロセス上でコンテキスト・メニューを開き、プロセスの作成を実行します。
作成したプロセスの識別の名前はuploadFile、タイプをコードを実行とします。ソースは位置がローカル・データベース、そしてPL/SQLコードとして以下を記述します。
元にしているブログのコードに、日本語の対応（apex_util.url_encodeの代わりにutl_url.escapeを使用）を追加しています。
続いて同様にプロセスを作成し、識別/名前としてcloseDialog、タイプをダイアログを閉じるを指定します。これにより、プロセスuploadFileの次にcloseDialogが実行され、本ダイアログ・ページが閉じて、ホーム画面に戻ります。
ここまででファイルのアップロードを行うページの作成が完了したので、保存を実行しておきましょう。
通常、ページが送信されたときに実行されるプロセスには、サーバー側の条件にて、どのボタン押下時なのか、条件としてボタンを指定しますが、今回の例ではUPLOADしかページ送信を行うボタンがないため省略しています。
uploadFileで指定したPL/SQLコードの中で、G_BASE_URLとG_OCI_WEB_CREDENTIALという置換文字列を使用しています。これはアプリケーションの静的置換文字列として設定します。アプリケーションのトップ・ページにあるアプリケーション定義の編集をクリックします。
そして、アプリケーション定義の編集画面を開き、置換のセクションに以下の設定を行います。
- G_BASE_URL:
https://objectstorage.REGION.oraclecloud.com/n/NAMESPACE/(RESTデータ・ソースlist_bucketsのベースURLと同じです) - G_OCI_WEB_CREDENTIAL: OCI_API_ACCESS(Web資格証明の静的識別子です)
ページ番号１のホームを開き、作成したダイアログを開くためのボタンを追加します。
左ペインのレンダリング・ツリーにあるリージョンBucket List上でコンテキスト・メニューを開き、ボタンの作成を実行します。識別のボタン名はUPLOAD、識別のラベルはUpload、レイアウトのボタン位置はNextを指定し、動作のアクションとしてこのアプリケーションのページにリダイレクトを選択します。 ターゲットの指定がリンクが定義されていません、となるので、それをクリックしてリンクを定義します。
ターゲットの指定を行うダイアログが表示されるので、ページを２、アイテムの設定として、名前をP2_BUCKET_NAME、その値を&P1_BUCKET_NAME.として設定します。その後OKをクリックします。
最後に作成したUPLOADボタンに動的アクションを追加します。UPLOADボタンの上でコンテキスト・メニューを開き、動的アクションの作成を実行します。新規に動的アクションとTrue条件で実行されるアクションが作成されます。動的アクションの識別の名前を新規から、任意の値(この例ではClose Dialog)に変更します。タイミングのイベントはダイアログのクローズ、選択タイプはボタン、ボタンがUPLOADとなっていることを確認します。
また、True条件で実行されるアクションの識別のアクションがリフレッシュ、影響を受ける要素がリージョン、リージョンとしてBucket Contentsを指定します。
これでローカルに存在するファイルをOCIオブジェクト・ストレージにアップロードする機能が実装できました。いくつかファイルをアップロードして、動作を確認してみしょう。
続く
