CODEWITHSUNDEEP
javajsfrichfaces
BRabbit27
BRabbit27

Reputation: 6623

RichFaces 4 notification when uploading file

I have a <rich:fileUpload> component and I want to show a notification when a file is rejected because the type is not allowed. I saw that RF has a <rich:notifyMessage> but I cannot render the message when a file is rejected. So far I have:

    <rich:fileUpload id="fileUploadComp"
                     addLabel="Agregar" clearAllLabel="Quitar todos"
                     clearLabel="Quitar" deleteLabel="Quitar"
                     doneLabel="Completado" uploadLabel="Subir archivos"
                     fileUploadListener="#{uploadBean.doUpload}"
                     acceptedTypes="txt, csv" onclear="onclear(event);"
                     noDuplicate="true">
        <a4j:ajax event="uploadcomplete" render="validationButton"/>
        <a4j:ajax event="typerejected" render="notificationFileRejected"/>
    </rich:fileUpload>

    <rich:notifyMessage for="fileUploadComp" 
                        id="notificationFileRejected"
                        sticky="true"
                        ajaxRendered="true"
                        title="Hello"/>

but I cannot see any notification globe when I choose a JPEG for instance.

Any idea on how to achieve this?

UPDATE

The main idea of this is to show a notification that tells the user something like "File type not allowed".

Any idea?

Upvotes: 2

Views: 3528

Answers (2)

Milo van der Zee
Milo van der Zee

Reputation: 1040

Something like:

<rich:fileUpload id="fileUploadComp"
                 addLabel="Agregar" clearAllLabel="Quitar todos"
                 clearLabel="Quitar" deleteLabel="Quitar"
                 doneLabel="Completado" uploadLabel="Subir archivos"
                 fileUploadListener="#{uploadBean.doUpload}"
                 acceptedTypes="txt, csv" onclear="onclear(event);"
                 ontyperejected="ontyperejected();"
                 noDuplicate="true">
    <a4j:ajax event="uploadcomplete" render="validationButton"/>
</rich:fileUpload>

<a4j:jsFunction name="ontyperejected" actionListener="#{uploadBean.setMessage()}"/>

<rich:notifyMessage stayTime="2000" nonblocking="true"/>

With java code:

public void setMessage() {
  String message="Wrong filetype...";
  FacesContext.getCurrentInstance().addMessage("info", new FacesMessage(FacesMessage.SEVERITY_INFO, message, message));
}

MAG, Milo van der Zee

Upvotes: 4

BRabbit27
BRabbit27

Reputation: 6623

Well not as nice as I would have wanted but It does the trick.

    <rich:fileUpload id="fileUploadComp"
                     addLabel="Agregar" clearAllLabel="Quitar todos"
                     clearLabel="Quitar" deleteLabel="Quitar"
                     doneLabel="Completado" uploadLabel="Subir archivos"
                     fileUploadListener="#{uploadBean.doUpload}"
                     acceptedTypes="txt, csv" onclear="onclear(event);"
                     ontyperejected="ontyperejected();"  //THIS IS MY TRICK
                     noDuplicate="true">
        <a4j:ajax event="uploadcomplete" render="validationButton"/>
    </rich:fileUpload>

    <script>
        var ontyperejected = function(){
            alert('Archivo inválido. Tipos permitidos: .txt y .csv');
        }
    </script>

just create a JScript function and send an alert message. And voilà. Still if someone know how to achieve that little pretty notification globe that appears and fades out I will be very thankful !

Upvotes: 1

Related Questions