ユーザーがアップロードするファイルを選択できるようにする必要があり、アップロード時にパラメーターとしてサーバーに送信される特定のファイルに適用される追加の必要な情報をユーザーから取得する必要があります。
これまでのところ、細かいアップローダーの onSubmit コールバックを使用して、必要な入力を含むモーダルを表示することでこれを行ってきました。入力が検証に合格した場合は、ファイル ID と関連するパラメーターを保存します。それ以外の場合、モーダルを閉じる/キャンセルする場合は、細かいアップローダーのキャンセル API を呼び出し、指定された ID のファイルをキャンセルします。
ユーザーはこれを複数回行うことができます。これにより、ファイルが標準の細かいアップローダー リストにキューに入れられ、[アップロード] を押して実際に同時にアップロードを開始します。
これはすべてうまく機能します。私の問題は、「複数」オプションが有効になっているため、ユーザーは同時に複数のファイルを選択またはドラッグできますが、モーダルをそれぞれに個別に表示する必要があることです。onSubmit イベントはファイルごとに個別に発生するため、前のモーダルをキャンセルまたは保存するまで、2 番目、3 番目などのモーダルが開かないようにするにはどうすればよいですか?
記録のために、私は実際に Backbone/Marionette を使用しており、onSubmit コールバックごとに「file:added」イベントをトリガーしています。ここでモーダル ビューを作成して表示していますが、ソリューションをバックボーンに結び付ける必要はありません。
また、fine-uploader を使用してファイルのパラメーターを収集するためのより良い方法がある場合、私は必ずしもこのアプローチに縛られているわけではありません。各ファイルに追加のデータが入力されていることを確認する必要があるだけです。そうしないと、アップロードできません。
Fine Uploader の onSubmit コールバックは次のとおりです。
.on('submit', function(event, id, name) {
var args = {};
args.id = id;
args.fileName = name;
uploadDocsVent.trigger('file:added', args);
})
これは、そのイベントをリッスンし、ファイル バックボーン モデルを作成し、モーダル領域に表示されるビューをインスタンス化するコードです。
uploadDocsVent.on("file:added", function(args){
var file = new UploadDocuments.File( args );
var addlInfoView = new UploadDocuments.Views.FileInfo({
model: file,
categories: App.uploadedFilesCategories
});
App.appLayout.modalConfirmRegion.show(addlInfoView);
});
私の見解では、モーダルクリックに応答するこのコードがあります。
onDialogPrimaryClicked: function () {
UploadDocuments.claimsUploadWidget.addFileWithInfo( this.model );
this.trigger("dialog:close");
},
onDialogSecondaryClicked: function () {
UploadDocuments.uploadView.uploader.fineUploader('cancel', this.model.get('id'));
this.trigger("dialog:close");
}
これにアプローチ/回避する方法についてのアイデアを事前に感謝します。