RichFaces 4のリッチさの限界：fileUploadを1つのファイルにアップロードしますか？

Question

hereのようにRichFaces4の<rich:fileUpload />を使用しています。 しかし、あなたが見ることができるように、ユーザーはたくさんの写真を選択することができますが、私は彼がただ一つの写真を選択できるようにしたいと思います。

アップロードが完了した後、マネージドBean（イメージをAmazon S3バケットに送信する）でメソッドを呼び出すにはどうすればよいですか？

EDIT：

<ui:composition> 
<h:outputStylesheet> 
    .top { 
     vertical-align: top; 
    } 

    .info { 
     height: 202px; 
     overflow: auto; 
    } 

    .rf-fu-lst { 
     height: 60px; 
    } 

    .rf-fu-itm { 
     border: 0; 
    } 
</h:outputStylesheet> 
<h:outputScript target="head"> 
jQuery.extend(RichFaces.ui.FileUpload.prototype, { 
    __updateButtons: function() { 
     if (!this.loadableItem && this.list.children(".rf-fu-itm").size()) { 
      if (this.items.length) { 
       this.uploadButton.css("display", "inline-block"); 
       this.addButton.hide(); 
      } else { 
       this.uploadButton.hide(); 
       this.addButton.css("display", "inline-block"); 
      } 
     } else { 
      this.uploadButton.hide(); 
      this.addButton.css("display", "inline-block"); 
     } 
    } 
}); 
</h:outputScript> 

    <h:form id="form_user_upload_picture" > 
     <h:panelGrid columns="2" columnClasses="top, top"> 
      <rich:fileUpload 
       id="upload" 
       fileUploadListener="#{user_file_upload.listener}" 
       acceptedTypes="jpg, gif, png, bmp" 
       addLabel="Adicionar" 
       clearAllLabel="Limpar todas" 
       clearLabel="limpar" 
       deleteLabel="apagar" 
       doneLabel="upload realizado" 
       sizeExceededLabel="arquivo muito grande, tente um arquivo de tamanho menor" 
       serverErrorLabel="ocorreu um erro em nosso servidor, tente novamente por favor" 
       uploadLabel="Enviar"> 

       <a4j:ajax event="uploadcomplete" execute="@none" render="picture" /> 
      </rich:fileUpload> 
     </h:panelGrid> 

    </h:form> 
</ui:composition> 

Answer 1

これはRF 3.3でサポートするために使用しました。しかし、RF 4.0の移行にかかる時間を節約するために、<rich:fileUpload>の中では特に注目を集めていません。現在は改善のために多くのopen ticketsがあります。

これらのファイルが改善されるまでは、カスタムjQuery/JSとCSSを導入して、1つのファイルのみを選択してアップロードする機能要件を達成するのが現在のベスト・ベットです。

このスクリプトは、選択したファイルが既にあります時に、追加ボタンを非表示にすることで、複数のファイルをアップロードするからエンドユーザーを防ぐ：

jQuery.extend(RichFaces.ui.FileUpload.prototype, { 
    __updateButtons: function() { 
     if (!this.loadableItem && this.list.children(".rf-fu-itm").size()) { 
      if (this.items.length) { 
       this.uploadButton.css("display", "inline-block"); 
       this.addButton.hide(); 
      } else { 
       this.uploadButton.hide(); 
       this.addButton.css("display", "inline-block"); 
      } 
     } else { 
      this.uploadButton.hide(); 
      this.addButton.css("display", "inline-block"); 
     } 
    } 
}); 

含む（JS上記後のRFのデフォルトのスクリプトをロードされていることを確認してくださいすでにjQueryを使用しています）。体内の<h:outputScript>でこれを行うことができます。必要に応じてtarget="head"と設定することができます。

このCSSファイルリストの高さを制限し、単一の項目の下の境界線を削除します。

.rf-fu-lst { 
    height: 60px; 
} 
.rf-fu-itm { 
    border: 0; 
} 

は、上記のCSSを後のRFのデフォルトのスタイルを読み込まれていることを確認します。あなたは体内の<h:outputStylesheet>でそれを行うことができます（頭に入れないでください）。

---

そして、どのようにアップロードが完了した後、私は（私のAmazon S3バケットに画像を送信する）私のマネージドBean内のメソッドを呼び出すのですか？

fileUploadListener属性に添付されているリスナーメソッドでジョブを実行してください。

<rich:fileUpload fileUploadListener="#{bean.upload}">