-
1. Re: fileUpload style
nbelaevski Mar 19, 2009 6:47 PM (in response to scott.johnston)Hello,
Better use Seam or Tomahawk file upload components. -
2. Re: fileUpload style
maxmustang May 8, 2009 3:34 AM (in response to scott.johnston)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
kaiwerther May 8, 2009 3:41 AM (in response to scott.johnston)Could you give us a full example?
-
4. Re: fileUpload style
maxmustang May 8, 2009 1:22 PM (in response to scott.johnston)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
vetalok Nov 23, 2010 9:18 AM (in response to maxmustang)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 Nov 24, 2010 9:00 AM (in response to vetalok)begin with next code.. create custom facelet with something like that:
<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>