ファイルアップロード機能を導入するには

502 views

最終的な動き

ファイルをアップロードするためのボタンが設置されており、ボタンをクリックするとエクスプローラー画面が表示されてファイルを選べるようになります。
ファイルを選択して開くボタンを押すと、アップロードが完了した旨のメッセージが表示されます。

仕組みは以下のようになっています。

ブラウザ側

  1. ファイルを選択します
  2. TypeScriptでファイルをBASE64形式にしてBlob項目にセットします
  3. ボタンをおすことでMagicのクリックイベントを起動します

Magic xpa側

  1. BlobFromBase64にてBase64形式のデータをBlob形式にします
  2. Blob形式のデータをBlob2Flieにて実ファイルにします

構築方法

①Magic側

1.プログラムを新規で作成します(※必要な場合)

  1. 新規作成をしてプログラム名を記述、F5キーで開きます
  2. タスクタイプを「Web Client」に変更します

2.データビューに変数を用意する

    1. 以下の変数名記述します
変数名形式説明
BlobDataBLOB(ANSI)TypeScriptにてファイルをBase64形式に変換したものがセットされます。
vFileName文字 256ファイル名を取得します。Blob2Fileにて使用します。
BtnEvent文字 20ボタンとして使います。
実際に表示はせずにAngularからはSimulateClickにてクリックされ、Base64形式のデータを実ファイルに変換します。
ボタンをプッシュボタンに設定します。

3.フォームへ配置する

  1. 作成した変数を設定するためのツールをフォーム画面で貼り付けます
  2. プロパティのデータ項目から割り当てる変数を選びます
    BlobData=ツールボックスからエディットを設置
    vFileName=項目からドラック&ドロップ
    BtnEvent=項目からドラック&ドロップ
  3. ツールボックスから設置したエディットに対してエディットのデータからBlobDataを設定します

4.ボタンのイベントを設定する

  1. イベントの設定をし、内部→クリックを選択します
  2. ブロックを記述しますBlobデータが存在するかを確認するためです。
    式の内容:BlobSize(BlobDate)>1
  3. アクションを記述します。
    BASE64形式のデータを指定場所に保存するためです。
    式の内容:Blb2File(BlobFromBase64(BlobDate),Translate(‘%WorkingDir%PDF\’)&Trim(vFileName))
  4. エラーの警告を記述します。
    アップロードが完了した後「アップロードいたしました」と表示させるためです。

5.メインルーティングへ追加する

  1. 「イベント、ルート」の記述の中で「コール、プログラム」を探します。
  2. 一番下のコールプログラムにカーソルを置き「F4キー」で行を追加します。
    新しく追加したプログラムを選択します。
  3. アクションを記述します。
    BASE64形式のデータを指定場所に保存するためです。
    式の内容:Blb2File(BlobFromBase64(BlobDate),Translate(‘%WorkingDir%PDF\’)&Trim(vFileName))
  4. エラーの警告を記述します。
    アップロードが完了した後「アップロードいたしました」と表示させるためです。

②SmartUX側

1.コンポーネントへの追加(※新規プログラムの場合)

  1. SmartUXを開きます
  2. 新しいプログラムの場合はコンポーネントの追加を行います

2.コンテナの設定(※新規プログラムの場合)

  1. コードを表示ボタンからタグを表示、拡張表示ボタンでコンテナを見えやすくします
  2. コンテナにデータモデルを設定します(「プログラム名+Form」)

3.アップロードボタンの設置

  1. <c-container>タグと</c-container>の間にスペースを空けて以下のタグを挿入します。
    <button mat-raised-button color="primary" name="attach_file" icon-start (click)="fileUploadButton()">
    <mat-icon>attach_file</mat-icon> FileUpload
    </button>
    <input id="file_upload" type="file" style="display: none" (change)="fileUpload($event)">
    
  2. 上記のように、ファイルアップロード機能が備わったアップロードボタンが追加されました
  3. 保存ボタンを押して保存します

4.ファイルアップロードを動かす命令を記述

  1. All Filesを選択します
  2. \app\magic\(Magicフォルダ名) \(プログラム・タスク名)\(フォーム名).component.tsを開きます。
  3. 一番下の } の上にコードを挿入します。
  4. 挿入するコード
    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();
    }
    

    ※赤文字はxpaで設定したコントロール名と置換してください。

    設置した様子

以上でボタンをクリックすることでファイルを選択し、選択することでクリックイベントが働きます。
クリックイベントでMagic側にて実ファイルにいたします。

③プレビュー方法

デフォルトの設定ではプレビューで表示される画面は、Loguin 画面だと思います。
目的の画面を表示させるために設定を変更しましょう。

1.Magic側での設定

  1. Web → Webアプリケーションの設定
  2. Webの設定内の「スタートアッププログラム」で目的のプログラム選びます

2.SmartUX側での設定

  1. SmartUXを開き、画面の右上にあるプレビューボタンを押す
  2. ボタンを押してエクスプローラーが表示され、ファイルを選びメッセージが表示されると成功です。
Share this Article

ファイルアップロード機能を導入するには

Or copy link

CONTENTS