この場合、ページとともにファイルが送信された後にページ全体が再ロードされます。ページ全体の再ロードを行わずにファイルをアップロードするために、ブラウザ側でファイルをアップロードする処理をJavaScriptで記述し、かつ、アップロードされたファイルを受け付ける処理をORDSのRESTサービスとして作成します。
作成したアプリケーションは以下のように動作します。ボタン作成や変更の適用をクリックしたときは、Oracle APEX標準のページの送信によるファイルのアップロードが行われます。ボタンREPLACEをクリックすると、動的アクションによるファイルのアップロードを行います。動的アクションによるファイルのアップロードではページの送信を行っていないため、ドロワーが閉じません。
以下よりアプリケーションの作成方法について紹介します。
クイックSQLの以下のモデルより、アップロードするファイルを保存する表FUD_DOCUMENTSを作成します。
# prefix: fud
documents
file_name vc80
mime_type vc80
content blobレビューおよび実行をクリックし、最終的に表FUD_DOCUMENTSが作成されるまで画面操作を行います。
作成された表FUD_DOCUMENTSを元に、アプリケーションの作成を行います。
アプリケーション作成ウィザードが起動します。
名前をSample File Upload by DAとし、アプリケーションの作成を実行します。
アプリケーションが作成されたら、ページ・デザイナでページ番号３のフォーム画面を開きます。
ページ・アイテムP3_CONTENTのストレージのMIMEタイプ列にMIME_TYPE、ファイル名列にFILE_NAMEを設定します。
以上でページの送信によるファイルのアップロードについては、最低限の実装ができました。
アップロードされたファイルを受け付けて、表FUD_DOCUMENTSを更新するRESTfulサービスを作成します。
/ords/<ワークスペース名>/fud/upload
メソッドはPUT、ソースとして以下を記述します。
パラメータとしてname、type、idを追加します。バインド変数はそれぞれNAME、TYPE、IDです。ソース・タイプはURI、データ型はidはINTEGER、それ以外はSTRINGとします。
名前とタイトルをFUD File UPload Sampleとし、ロールにRESTful Services、モジュールにFUD - File Upload Sampleを選択します。
以上でファイルのアップロードを受け付けるRESTfulサービスは完成です。
ファイルのアップロードを行なうボタンREPLACEを作成します。
ページ・デザイナでページ番号３を開きます。
ボタンREPLACEを作成し、動作のアクションとして動的アクションで定義を選択します。
ボタンREPLACEに動的アクションを作成します。識別の名前はonClick REPLACEとします。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
以上でアプリケーションは完成です。実行すると先頭のGIF動画のように動作します。
作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-file-upload-by-da.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
