5 Replies Latest reply on Sep 12, 2008 12:32 PM by lrmymycn

    Can i replace fileUpload component with a button?

    lrmymycn
    lrmymycn Sep 9, 2008 7:46 AM

      Hi all,

      I am new to richfaces. Currently, i am using fileUpload component for my project.

      For the webpage style purpose, I only keep the Add button and hide the other things on the panel. It looks perfect on IE7 and FF, but messes up on IE6.

      I don't think I can fix this problem of IE6 (if you can, please let me know), so I try to replace the fileUpload component with a button or a link.

      This button should do the exactly same thing of Add button. It opens the file browser and uploads the file immediately.

      I think I may use a dummy button that will call the Add button, but I don't know Add's id.

      Any help will be appreciated.

      Regards
      Sam

      • 1321 Views
      • Tags:
        • 1. Re: Can i replace fileUpload component with a button?
          andrei_exadel Sep 9, 2008 9:01 AM (in response to lrmymycn)

          Hi,

          You try to simulate 'click' event for ADD button, but I'm not sure you'll get this.
          ADD button id you can see in HTML code.
          File input id is 'fileUploadId:file'.

          I unsuccessfully tried $('fileUploadId:file').click() or dispatch event to this element (browse dialog does not appear in FF, Opera, Safari).
          Seems it prohibited by browser security reasons.

          Only one case when it works fine: fileUpload in Flash module.

          So, you should go by your first way: to use real ADD button & hide all other things. Please post here your solution & I will try to help you to fix problems with IE6.

            • Actions
          • 2. Re: Can i replace fileUpload component with a button?
            lrmymycn
            lrmymycn Sep 10, 2008 11:19 PM (in response to lrmymycn)

            Hi,

            Thanks for your reply.

            This is how I call the component in the page:
            <rich:fileUpload id="infoPageImageUpload" immediateUpload="true"
            acceptedTypes="jpg, gif"
            addControlLabel="#{refDataBO.messages[178].messageText}"
            fileUploadListener="#{uploadMB.uploadHelppointImage}"
            listHeight="0"
            listWidth="0"
            oncomplete="document.getElementById('helppoint-instoredisplay-upload:imageupload').click()">
            </rich:fileUpload>

            And here is how I set it style:

            /* -----------------------------------------------------------------
            rich:fileUpload button config
            ---------------------------------------------------------------------*/
            .rich-fileupload-list-decor,
            .rich-fileupload-toolbar-decor,
            .rich-fileupload-button-border,
            .rich-fileupload-list-overflow{
            background-color: #fff;
            border: none;
            }
            .rich-fileupload-button {
            font-weight:bold;
            display: block; text-align: center;vertical-align:middle;
            text-decoration: none;
            width: 180px; height: 27px;
            margin: 0; padding: 0;
            background: url(../images/button-180-wide.gif) no-repeat left top;
            }

            .rich-fileupload-button-light,
            .rich-fileupload-button-press{
            font-weight:bold;
            display: block; text-align: center;vertical-align:middle;
            text-decoration: none;
            border: none;
            width: 180px; height: 27px;
            margin: 0; padding: 0px;
            background: url(../images/button-180-wide-hover.gif) no-repeat left top;
            }


            .rich-fileupload-ico-add {
            padding: 3px;
            display: block; text-align: center;vertical-align:middle;
            background: none;
            }

            Thanks

              • Actions
            • 3. Re: Can i replace fileUpload component with a button?
              lrmymycn
              lrmymycn Sep 11, 2008 3:17 AM (in response to lrmymycn)

              I suppose I have found out the reason.

              To hide the file input component, its css has been set as "filter:alpha(opacity = 0)".However, since the file upload component is generates by js, this css isn't loaded correctly in ie6.

              You may like to read
              http://joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/

                • Actions
              • 4. Re: Can i replace fileUpload component with a button?
                andrei_exadel Sep 11, 2008 5:28 AM (in response to lrmymycn)

                As I understood you want to see only ADD button without Upload, Clean buttons & etc controls.

                To get this I tried JS hack with css style modification.
                My solution here:

                <head>
<style type="style/css">

.rich-fileupload-list-overflow {
 display: none;
}
</style>
</head>
<body>
<h:form id="_f">
 <rich:fileUpload id="fileUpload" immediateUpload="true"
 acceptedTypes="jpg, gif"
 addControlLabel="Add"
 fileUploadListener="#{bean.upload}"
 listHeight="0px"
 listWidth="70px"
 maxFilesQuantity="99">
</rich:fileUpload>
</h:form>
<script type="text/javascript">
 var f = $('_f:fileUpload').component;
 f.processButtons = function () {
 f.disableAddButton();
 }.bind(f);

 f.getFileEntryWidth = function () {
 }.bind(f);
</script>
</body>



                You see I overriden 'processButtons' & 'getFileEntryWidth' functions.
                The first turns off 'Upload' & 'Clean' button processing. So its become always hidden.

                The second avoids JS error after ADD button has been clicked. It's hack.

                  • Actions
                • 5. Re: Can i replace fileUpload component with a button?
                  lrmymycn
                  lrmymycn Sep 12, 2008 12:32 PM (in response to lrmymycn)

                  This time I found the real reason.

                  My ie6 is installed with ie7 in a single machine, which makes it doesn't work correctly.

                  I just wasted 3 day on this stupid problem.

                  Thanks for your support.

                    • Actions