Wie beschränke ich RichFaces 4 rich:fileUpload auf einen einzelnen Datei-Upload?

Question

Ich benutze die <rich:fileUpload /> von RichFaces4, wie Sie sehen können aquí . Aber wie Sie sehen können, kann der Benutzer dort eine Menge Bilder auswählen, aber ich möchte, dass er nur ein Bild auswählen kann.

Und wie rufe ich eine Methode in meiner verwalteten Bohne (die das Bild zu meinem Amazon S3 Bucket senden), nachdem der Upload abgeschlossen ist?

EDITAR:

<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

Dies wurde früher in RF 3.3 unterstützt. Um jedoch Zeit für die Migration auf RF 4.0 zu sparen, wurde unter anderem die <rich:fileUpload> hat viel weniger Aufmerksamkeit bekommen, als es verdient. Derzeit gibt es eine Vielzahl von offene Tickets um sie zu verbessern.

Bis es verbessert wird, ist es derzeit am besten, einige benutzerdefinierte jQuery/JS und CSS einzubauen, um die funktionale Anforderung der Auswahl und des Hochladens nur einer Datei zu erfüllen.

Dieses Skript verhindert, dass der Endbenutzer mehrere Dateien hochlädt, indem es die Schaltfläche "Hinzufügen" ausblendet, wenn bereits eine Datei ausgewählt ist:

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");
        }
    }
});

Stellen Sie sicher, dass das obige JS geladen ist après die RF-Standardskripte (die bereits jQuery enthalten). Sie könnten das durch eine <h:outputScript> im Körper, die Sie bei Bedarf mit target="head" .

Dieses CSS begrenzt die Höhe der Dateiliste und entfernt den unteren Rand des einzelnen Elements:

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

Stellen Sie sicher, dass das obige CSS geladen ist après die RF-Standardstile. Sie könnten dies durch eine <h:outputStylesheet> im Körper (also nicht im Kopf).

---

Und wie rufe ich eine Methode in meiner verwalteten Bohne (die das Bild zu meinem Amazon S3 Bucket senden), nachdem der Upload abgeschlossen ist?

Erledigen Sie die Aufgabe einfach in der Zuhörermethode, die an fileUploadListener Attribut.

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