how to remove upload cancel button from

Question

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

progress bar
upload button
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"/>

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

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

edited May 23 '17 at 11:50

Community

1
1

answered Sep 29 '12 at 17:01

Daniel

36,833
10
119
200

what will be the value of styleClass for – Abhishek Dhote Sep 29 '12 at 17:22
no value at all... just place all the *css* code I posted above in your custom css file and include it in your xhtml page , thats all... – Daniel Sep 29 '12 at 17:58
If I put .progress{ display:none; } this works but if I use #related_image .progress{ display:none; } this doesnt work, any clue – Abhishek Dhote Sep 29 '12 at 18:01
work with your browser dev tools / firefox and inspect the id of your upload component , in showcase for example its something like `j_idt19:j_idt20` , that is the prefix of the css selectors... – Daniel Sep 29 '12 at 18:04
id of p:fileupload is related_image – Abhishek Dhote Sep 29 '12 at 18:08
does `#related_image.progress{ display:none; }` without space works ? you could also assign id to a form that wraps the fileupload component and try `#yourFormID .progress{ display:none; }` – Daniel Sep 29 '12 at 18:14
1

#yourFormID .progress{ display:none; } works thanks a million Daniel. Just want to check if you have answer for my second query the 'fileLimit' I want to set it to 1 but when I do that it says invalid attribute. – Abhishek Dhote Sep 29 '12 at 18:21
well primefaces user guide 3.3 has a mentioned about that. Do you know any other approach to restrict this to only 1 file allowed to be uploaded – Abhishek Dhote Sep 29 '12 at 18:43
its should be by default (`multiple="false"`) take a look at the showcase http://www.primefaces.org/showcase/ui/fileUploadSingle.jsf – Daniel Sep 29 '12 at 20:30
(multiple="false") will not allow multiple files to be selected for upload in the file dialog in one shot but what I want it p:uploadfile component should allow only one file to be selected for upload. – Abhishek Dhote Sep 30 '12 at 04:18
Than you should use `auto="true"` – Daniel Sep 30 '12 at 06:14

how to remove upload cancel button from

1 Answers1

Linked