最近のアクセス：
File Upload ユーザーコントロール

File Upload は HTML5 のコントロールであり、その目的はユーザーが複数のファイルを同時に Web サーバーのファイルシステムにアップロードできるようにすることです。これらのファイルはその後、必要に応じて処理できます。
このコントロールは GeneXus に付属し、次の特徴を備えています:
  • アップロードするファイルをフォームにドラッグできます。
  • ファイルは個別にアップロードすることも、すべてを一度にアップロードすることもできます。アップロード対象のすべてのファイルについて、アップロードの進行状況を確認できます。
  • アップロード中の画像ファイル、オーディオファイル、またはビデオファイルのプレビューが表示されます (ブラウザーでその形式がサポートされている場合)。
  • レスポンシブ Web アプリケーション用のコントロールです。
  • Chrome、Firefox、Safari、IE バージョン 8 以降で動作します。
このコントロールは、ツールボックスの [ 拡張コントロール ] セクションにあり、フォームにドラッグする必要があります。このコントロールは抽象レイアウトでのみサポートされます。
イメージ:30575.png
コントロールをフォームにドラッグすると、FileUploadData SDT がナレッジベースにインポートされます。その目的は、アップロード対象のファイルデータを取得することです。
イメージ:32493.png

コントロールの使用方法

  1. 設計時には、コントロールの [ Uploaded Files ] プロパティを設定する必要があります。FileUploadData SDT コレクション データ タイプに基づく変数に割り当てる必要があります。
イメージ:30576.png
       2. ファイルがアップロードされるとき、 [ Uploaded Files ] プロパティに関連付けられている変数を使用してファイルを取得できます。ファイルはサーバー ファイル システムで [ Temp media directory ] プロパティで指定されている場所にアップロードされます。これらのファイルは、ここに示す条件に従ってサーバーから削除されます。Java では、ファイルはこのドキュメントに従って削除されます。ファイルを使用する前に File データタイプを使用してファイルの存在を確認することをお勧めします。

コントロールのプロパティ

Auto Upload 既定では、ウィジェットに追加されたファイルは、ユーザーが開始ボタンをクリックしたときにアップロードされます。自動アップロードを有効にするには、このプロパティを True に設定します。
Tooltip Text [ ファイルを追加 ] ボタン上に表示するツールチップのテキストを設定します。
Enable Uploaded File Canceling 既定では、アップロードをキャンセルできるのは、アップロードが完了していないファイルだけです。既に完了している場合はキャンセルできません。既にアップロードしたファイルのキャンセルを有効にするには、このプロパティを True に設定します。アップロードをキャンセルされたファイルは、 [ Uploaded Files ] プロパティに紐づいている SDT コレクションから削除されます。
Disable Image Resize True に設定すると、コントロールによる画像の自動リサイズが無効になります。False に設定すると、画像はサイズに応じて自動的にリサイズされます。
Max File Size 許可されるバイト単位の最大ファイルサイズです。このオプションは、File API に対応するブラウザーにのみ効果があります。
Max Number Of Files このプロパティは、このコントロールを使用してアップロード可能なファイルの上限数を指定するために使用します。上限数を設定しない場合は、0 を指定します。
Auto Disable Adding Files True に設定すると、 [ Max Number Of Files ] プロパティが設定されていてファイル数が上限に達したときに、 [ ファイルを追加 ] ボタンが自動的に無効になり、コントロール上にファイルをドロップできなくなります。
Accepted File Types コントロールで許可するファイルのタイプを指定します。カスタム タイプ リストを指定するには、 [ Custom ] を選択し、 [ Custom File Types ] プロパティを使用して、許可するファイルタイプを指定します。
 
有効な値は
  • All types (*.*)
  • Image (*.png, *.gif, *.jpg, *.jpeg)
  • Audio (*.mp3, *.wav, *.ogg, *.3gp, *,aac, *.wma)
  • Video (*.avi, *flv, *wmv, *.mov, *.mp4)
  • Custom
Custom File Types 許可するファイル拡張子のコンマ区切りのリストです。例: doc, xls ,pdf
Uploaded Files アップロードされたファイルを含む FileUploadData SDT コレクションです。
Failed Files 失敗したアップロードを含む FileUploadData SDT コレクションです。

コントロールのイベント

UploadComplete このイベントは、1 つまたは複数のファイルのアップロードが完了すると自動的に実行されます。
UploadFailed このイベントを使って、失敗したアップロードについて調べることができます。

コントロールメソッド

StartUpload   アップロードアクションがトリガーされます。任意のイベントで使用できますが、アップロードしたファイルの情報は UploadComplete イベントでのみ使用可能です。

File Upload UC の表示の設定方法

テーマの FileUpload クラスを使用します (または、下位項目を 1 つ定義します)。
FileUpload クラスは既定で UC の [ Class ] プロパティに割り当てられます。
イメージ:30582.png
テーマの Class は、次のように編集できます:
イメージ:30583.png
  • Add File Button Class: [ ファイルを追加 ] ボタンのスタイルに使用するクラス
  • Start Button Class: [ 開始 ] ボタンのスタイルに使用するクラス
  • Cancel Button Class: [ キャンセル ] ボタンのスタイルに使用するクラス
  • Buttons Bar Class: ファイルテーブル上部のボタンが含まれるバーのスタイルに使用するクラス
  • Drop Zone Class: ファイルをドロップする領域のスタイルに使用するクラス
  • Files Table Class: ファイルを表示するテーブルのスタイルに使用するクラス
  • File Preview Class: ファイルプレビューのスタイルに使用するクラス
  • File Name Class: ファイル名テキストのスタイルに使用するクラス
  • File Size Class: ファイル サイズ テキストのスタイルに使用するクラス
  • Error Message Class: コントロールのエラーメッセージのスタイルに使用するクラス

ボタンのキャプションの変更方法

ボタンのキャプションは GeneXus の標準メッセージです。変更したい場合は、Language オブジェクトで 「ユーザーメッセージのみを表示」のフィルタを解除します。FileUpload ユーザーコントロールのボタンのキャプションには、接頭語 GXM_fileupload がついています。
イメージ:39483.png

例

次の 2 つのトランザクション (両方ともビジネスコンポーネントとして設定) があるとします:
イメージ:30577.png
ProductPanel オブジェクトは次のとおりです:
イメージ:30615.png
パラメーターとして &ProductId を受け取ります。Product 情報をロードし、エンドユーザーが製品の基本情報 (名前または価格) を変更できるようにします。また、この製品に関連する写真をアップロードするボタンも提供します。このボタンをクリックすると、別の Web パネルが呼び出されます。エンドユーザーは、そのパネルで複数のファイルを選択して同時にアップロードできます。また、写真を削除することもできます。
フォームは次のようになります:
イメージ:30616.png
File Upload コントロールをフォームにドラッグし、 [ Uploaded Files ] プロパティを &FileUploadedDataColl 変数に設定しています。また、アップロード済みの写真はグリッドを使用して表示します。
写真をデータベースに保存するプロセスのコードの一部を以下に示します。サンプル全体を確認するには、「File: FileUpload UC sample」からダウンロードしてください。
Event 'Confirm'

    for &FileUploadData in &FileUploadDataColl

        &ProductPhotoItem = new()
        &ProductPhotoItem.ProductId = &ProductId
        &ProductPhotoItem.ProductPhoto = &FileUploadData.File
        &ProductPhotoItem.Save()
        if &ProductPhotoItem.Success()
            commit
            &count += 1
            msg(format(!"Data sucessfully added: File #%1",&count.Tostring()))
        else
            &ErrorMessage = &ProductPhotoItem.GetMessages().Item(1).Description
            msg(format(!"There was an error uploading the images: %1",&ErrorMessage))
        endif

    endfor
    grid1.Refresh()
Endevent
基本的に、&FileUploadDataColl コレクションがスキャンされ、各写真がデータベースに保存されます。
ProductPhotoId は次のルールに従って割り当てられます。これは ProductPhoto トランザクションで定義されています。
serial(productPhotoId,ProductPhotoLastId,1);
実行時のフォームは次のようになります:
イメージ:30617.png
イメージ:30618.png

ヒント: 要求の最大サイズの確認 (.NET)

既定では要求のサイズは 4 M に制限されます。そのため、4 M を超えるサイズのファイルがアップロードされると、「Internal Server Error」のようなエラーが発生します。
ブラウザー開発者ツール (F12) を使用した場合のエラーは次のとおりです: "Failed to load resource: the server responded with a status of 500 (Internal Server Error) Gxobject.aspx:1"
Windows のイベントビューアを使用した場合のエラーは次のとおりです: "Exception message: Maximum request length exceeded."
解決策
web.config ファイルで、要求の最大サイズを大きくします。
20 M に制限する場合は次のとおりです:
<system.web>
    <httpRuntime executionTimeout="600" maxRequestLength="20120"/>
 
サンプルは「File: FileUpload UC sample」からダウンロードできます。





サブページ
Created: 17/05/30 19:02 by Admin Last update: 21/05/20 01:24 by Admin
カテゴリ
Powered by GXwiki 3.0