1

ユーザーがアップロードするファイルを選択できるようにする必要があり、アップロード時にパラメーターとしてサーバーに送信される特定のファイルに適用される追加の必要な情報をユーザーから取得する必要があります。

これまでのところ、細かいアップローダーの 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");
}

これにアプローチ/回避する方法についてのアイデアを事前に感謝します。

4

1 に答える 1