6 Replies Latest reply on Nov 24, 2010 9:00 AM by Ilya Shaikovsky

    fileUpload style

    Scott Johnston Newbie

      Is there any way to make the fileUpload component look like a normal input type="file" html tag?

      If not, what combination of attributes and style hacks would get me here?

      I'm hoping that someone else has needed this at some point.

        • 1. Re: fileUpload style
          Nick Belaevski Master

          Hello,

          Better use Seam or Tomahawk file upload components.

          • 2. Re: fileUpload style
            Max Laenzlinger Newbie

            Hi,
            I just made it this way:
            Right side of every (disabled) inputText a FileUpload with following settings:
            - listHeight=0 (so there is no list any more)
            - immediateUpload=true (so there is no button upload any more)
            - autoclear=true (so there is no button clear any more)

            All the rest is according the demo application. (Especially i added the 'delete' button right side of FileUpload-Tag; with same look like the remaining add-button, using div's and styles of rich-fileupload-button)

            • 3. Re: fileUpload style
              Kai Werther Newbie

              Could you give us a full example?

              • 4. Re: fileUpload style
                Max Laenzlinger Newbie

                Please see the file Upload demo application from Ilya Shaikovsky is full i took the same code - just make the few parameter changes mentioned (also set uploadsAvailable to 1). Show the uploaded file instead in a disabled input field and arrange right of it the upload-tag and clear(delete) button which calls fileUploadBean.clearUploadData(). Make this for each file; each file has its own upload- and clear-button.

                • 5. Re: fileUpload style
                  Vitalii Obmaniuk Newbie

                  I've tried with all possible attribute combinations but it does not look like a normal input type="file" html tag.

                  Did someone successfully resolved the problem?

                  Did someone successfully added tomahawk component (bad solution, IMHO)?

                  Did someone successfully wrote own component?

                  • 6. Re: fileUpload style
                    Ilya Shaikovsky Master

                    begin with next code.. create custom facelet with something like that:

                    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    <style>
                    .top {
                    vertical-align: top;
                    }
                    .info {
                    height: 202px;
                    overflow: auto;
                    }
                    .rich-fileupload-list-decor,.rich-fileupload-toolbar-decor {
                    background: none;
                    border: none;
                    }
                    .rich-fileupload-list-decor {
                    float: right;
                    }
                    .rich-fileupload-list-overflow {
                    display: none;
                    }
                    </style>
                    <script type="text/javascript">
                    function add(event){
                    #{rich:element('uploadData')}.value=event.memo.entries[0].fileName;
                    jQuery('.rich-fileupload-toolbar-decor .rich-fileupload-button-border')[0].style.display='none';
                    }
                    </script>
                    <rich:jQuery rendered="false" />
                    <h:form>
                    <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                    <h:inputText disabled="true" id="uploadData"
                    style="float:left" /> <rich:fileUpload maxFilesQuantity="1"
                    id="upload" onadd="add(event)" allowFlash="false">
                    </rich:fileUpload>
                    </h:panelGrid>
                    </h:form>
                    </ui:composition>

                    <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                         xmlns:ui="http://java.sun.com/jsf/facelets"

                         xmlns:h="http://java.sun.com/jsf/html"

                         xmlns:f="http://java.sun.com/jsf/core"

                         xmlns:a4j="http://richfaces.org/a4j"

                         xmlns:rich="http://richfaces.org/rich">

                     

                         <style>

                    .top {

                         vertical-align: top;

                    }

                     

                    .info {

                         height: 202px;

                         overflow: auto;

                    }

                     

                    .rich-fileupload-list-decor,.rich-fileupload-toolbar-decor {

                         background: none;

                         border: none;

                    }

                     

                    .rich-fileupload-list-decor {

                         float: right;

                    }

                     

                    .rich-fileupload-list-overflow {

                         display: none;

                    }

                    </style>

                    <script type="text/javascript">

                         function add(event){

                              #{rich:element('uploadData')}.value=event.memo.entries[0].fileName;

                              jQuery('.rich-fileupload-toolbar-decor .rich-fileupload-button-border')[0].style.display='none';     

                         }

                    </script>

                         <rich:jQuery rendered="false" />

                         <h:form>

                              <h:panelGrid columns="2" cellpadding="0" cellspacing="0">

                              <h:inputText disabled="true" id="uploadData"

                                   style="float:left" /> <rich:fileUpload maxFilesQuantity="1"

                                   id="upload" onadd="add(event)" allowFlash="false">

                              </rich:fileUpload>

                              </h:panelGrid>

                         </h:form>

                    </ui:composition>