0

I am using <p:fileUpload> tag for file upload functionality. But I need to change the text box size which I am unable to.

<h:outputLabel id="attachment_label" value="Add Attachment(s)" styleClass="atf-label" />        
<p:fileUpload value="" mode="simple" style="width:350px"/>

I tried to set the width in CSS, but it didn't have any effect.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Cyd
  • 27
  • 4
  • 11
  • I am thinking this is not possible, because the simple fileupload uses the standard browser input file field. I think if you want it to look different, then you should use the advanced mode. – Lyrion Mar 07 '13 at 14:11

3 Answers3

0

I've done a bit of testing to see if this was possible. Primefaces translates the simple fileUpload as : 

<input type="file" id="fileUploadForm:j_idt90" name="fileUploadForm:j_idt90" style="">

This is basicly the standard browser input field of the type file, meaning on chrome, firefox, ie... ect it will all look differently. Now in my locale the standard size of this box is 238px, and by increasing the width of the input type, I do see the box surrounding the upload to grow larger, but sadly the textbox and button don't follow.

If you want the fileupload to be different i would suggest looking at the advanced mode for the fileupload. You can see it at work on the primefaces showcase : http://www.primefaces.org/showcase/ui/fileUploadSingle.jsf

Edit: I forgot to test it in IE8 (Only have ie8 on this computer). In chrome the text is an output text, in firefox it is in an inputtext field that can't grow larger, but on IE8 if i add the width:

<p:fileUpload value="#{fileUploadBean.file}" mode="simple" style="width:500px;"/>

The inputbox does grow larger.

Lyrion
  • 426
  • 6
  • 21
0

This is the big limitation in the file upload functionality for a long time.Primefaces FileUpload is not an exception to this scenario.So, there is no way to change the Width of the input text box. If you want more info and other options check this anwser :

Can we change <input type="file"> style?

Community
  • 1
  • 1
SRy
  • 2,901
  • 8
  • 36
  • 57
0

Primefaces p:fileUpload text size increased by applying inputField styleClass.

style.css

.inputField {
   width: 350px !important;
}

fileUpload.xhtml

<p:fileUpload id="imageId" mode="simple" styleClass="inputField"></p:fileUpload>
UdayKiran Pulipati
  • 6,579
  • 7
  • 67
  • 92