ファイルをアップロードする方法(スタートアップテンプレート)

処理の流れ

1. ボタンをクリックする
2. Type=”File”のファイル参照ボタンを押したことにする
3. ファイルを選択する
4. ファイル名を取得したことでfileUploadイベントが動く
5. ファイルを読み終えるとMagic xpaの変数にファイル名とBASE64形式のデータを保存する
6. Magic xpaフォームで設定したボタンをクリックしたことにしてMagic側のクリックイベントを起動する
7. サーバー側でBASE64形式のデータを実際のファイルに変換する

Magic xpa側

変数

必要な項目

上記の変数を画面に配置する

ロジック

1. BlobSize(BlobData)>1で空白データかどうかをチェックする
2. BlobFromBase64()でBASE64データをBlobに変換する
3. Blb2File()でBlobデータを実際のファイルに変換する

HTMLを記述する

SmartUXにて画面を構築します。

ただし、ウィジェットは配置せずに上記のようににコードを書きます。

コードを書く場合はSmartUXの「コードを見る」を押し、アクティブにします。

BtnEventとマッピングは行いません。

type=”file” ファイル指定用のインプット項目。 style=”display:none” とすることで見えなくしている。

ファイル名を変更することでfileUpload($event)という関数を呼び出している。

accept=”.txt”なので拡張子がtxtのものを選択しようとしている。

次にテンプレートの右側にある「コンポーネント」を選択します。

override createFormControlsAccessor(formGroup: FormGroup) {
    this.mgfc = new MgFormControlsAccessor(formGroup, this.magicServices);
}

と最下行の

}

の間に次のコードをコピーアンドペーストします。

fileUpload = (event) => {
const file = event.target.files[0];
if (!file) {
console.error('ファイルが選択されていません。');
return;
}

const reader = new FileReader();
reader.readAsDataURL(file);

reader.onload = () => {
// FileReaderのresultをstring型として扱うための型アサーション
const result = reader.result as string;
const base64Data = result.split(',')[1];

// UIコントロールに値をセット
this.mg.setValueToControl(this.mgc.V_vFileName, file.name);
this.mg.setValueToControl(this.mgc.BlobData, base64Data);

// シミュレートされたクリックイベントをトリガー
this.mg.simulateClick(this.mgc.V_BtnEvent);
};

reader.onerror = (error) => {
console.error('ファイルの読み込み中にエラーが発生しました:', error);
};
}


fileUploadButton(): void {
document.getElementById('file_upload')?.click();
}

this.mg.setValueToControl(this.mgc.V_vFileName, file.name);
⇒ ファイル名をMagic xpaで設置したV_vFileNameに代入

this.mg.setValueToControl(this.mgc.BlobData, base64Data);
⇒ 読み取ったBlobデータをMagic xpaで設置したBlobDataに代入

this.mg.simulateClick(this.mgc.V_BtnEvent);
⇒ Magic xpaで設置したV_BtnEventを押したことにする

以上でファイルのアップロードが可能となります。