Как ограничить RichFaces 4 rich: fileUpload для загрузки одного файла? - PullRequest
Новая
       38

Как ограничить RichFaces 4 rich: fileUpload для загрузки одного файла?

4 голосов
/ 07 декабря 2011

Я использую <rich:fileUpload /> от RichFaces4, как вы можете видеть здесь .Но, как вы можете видеть, пользователь может выбрать много изображений, но я хочу, чтобы он мог выбрать только одно изображение.

И как мне вызвать метод в моем управляемом компоненте (который отправляет изображение на мой Amazon S3)ведро) после завершения загрузки?

РЕДАКТИРОВАТЬ: 

<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>

1 Ответ

4 голосов
/ 07 декабря 2011

Раньше это поддерживалось в RF 3.3.Но чтобы сэкономить время на переход на RF 4.0, помимо прочего, <rich:fileUpload> получил гораздо меньше внимания, чем заслуживает.В настоящее время существует множество открытых заявок для его улучшения.

Пока они не улучшат его, в настоящее время лучше всего использовать некоторые пользовательские jQuery / JS и CSS для достижения функциональных требований:выбор и выгрузка только одного файла.

Этот скрипт не позволяет конечному пользователю загружать несколько файлов, скрывая кнопку добавления, когда файл уже выбран: 

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) после завершения загрузки?

Просто выполните работу в методе прослушивателя, который прикреплен к атрибуту fileUploadListener. 

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