Question

In my JSF 2.0 – Primefaces application I am using I DO NOT want to have

1. progress bar
2. upload button
3. cancel button
   which shows up adjacent to the selected image(once the image is selected)

Another issue is the ‘fileLimit’ I want to set it to 1 but when I do that it says invalid attribute.

Here is my code:

<p:fileUpload id="related_image" fileUploadListener="#{fileUploadController.handleFileUpload}"  
        mode="advance"  
        auto="false" 
        showButtons="false"
        sizeLimit="100000"
        fileLimit ="1"
        allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
        style="width: 310px"/>

Answer 1

Basically all you have to do is to assign find out the right css selectors and set them with display:none; (put them in your .css file and include it with <h:outputStylesheet)

in general (in css you need to escape the colon with \3a Handling a colon in an element ID in a CSS selector , while in jquery you should use \\:)

#some_prefix_id\3a your_file_upload_component_id .someClass{
    display:none;
}

where the some_prefix_id might be some form id or some naming
container id ,

or (sometimes there is no prefix before your_file_upload_component_id )

#your_file_upload_component_id .someClass{
    display:none;
}

Although , INMO , best approach would be assigning an id to your form and using this selector in css :

#your_form_id .someClass{
    display:none;
}

Now to the exact selectors…

so to remove the upload button

#related_image .start{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .start").hide();

to remove the cancel button which shows up adjacent to the selected image(once the image is selected)

#related_image .cancel{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .cancel").hide();

to remove progress bar

#related_image .progress{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .progress").hide();

You can test the jquery approach on primefaces showcase if you want , just replace the #related_image with #j_idt19\\:j_idt20 for example $("#j_idt19\\:j_idt20 .start").hide();

---

There is no such attribute as fileLimit take a look at the Tag fileUpload