CSS with multiple uploaders

Jan 6, 2009 at 7:22 PM
Hello,

I am attempting to have multiple uploaders on a single page, and if I assign a CSS class for one, but not the other, it is ignored for the one a CSS was assigned.

In this example, both uploaders are rendered with the default CSS, but a CSS was assigned to FileUploader2.  Any suggestions?

<

 

cc1:FileUploader ID="FileUploader1" runat="server">

 

 

<Adapters>

 

 

<cc1:FileSaverAdapter Runat="server" FolderName="../Test" />

 

 

</Adapters>

 

 

</cc1:FileUploader>

 

 

 

 


<
cc1:FileUploader ID="FileUploader2" runat="server" CssUrl="~/AppThemes/FTFlajaxian.css">

 

 

<Adapters>

 

 

<cc1:FileSaverAdapter Runat="server" FolderName="../Test" />

 

 

</Adapters>

 

 

</cc1:FileUploader>


 

Coordinator
Jan 6, 2009 at 8:20 PM
Edited Jan 6, 2009 at 8:21 PM
If you want two uploaders to have different CSS you will have to override JsFunc_GenerateBaseHtml for one of them as where the third element for Flajaxian.createElement: method is the class name, change it to whatever you want

<script>
function GenerateBaseHtml(uploader){

    var box = Flajaxian.createElement("div", uploader.get_id() + "_FileBox", "Flajaxian_FileBox");
    uploader.set_fileBoxUI(box); // setting File Box

    var header = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeader", "Flajaxian_FileBoxHeader");
    box.appendChild(header);

    var headerTxt = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeaderText", "Flajaxian_FileBoxHeaderText");
    header.appendChild(headerTxt);

    var percTxt = Flajaxian.createElement("span", uploader.get_id() + "_FileBoxHeaderPercentage", "Flajaxian_FileBoxHeaderPercentage");
    headerTxt.appendChild(percTxt);
    uploader.set_percentageUI(percTxt); // setting percentage holder

    headerTxt.appendChild(document.createTextNode("   "));

    var headerArrow = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeaderArrowHolder", "Flajaxian_FileBoxHeaderArrowHolder");
    header.appendChild(headerArrow);

    var arrow = Flajaxian.createElement("img", uploader.get_id() + "_FileBoxHeaderArrowImg", "Flajaxian_FileBoxHeaderArrowImg");
    arrow.src = uploader.get_openedArrowUrl();
    arrow.border = "0";
    headerArrow.appendChild(arrow);
    uploader.set_arrowUI(arrow); // setting arrow image

    var fileList = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxFileList", "Flajaxian_FileBoxFileList");
    box.appendChild(fileList);
    uploader.set_fileListUI(fileList); // setting file list

} </script>
<
fjx:FileUploader JsFunc_GenerateBaseHtml="GenerateBaseHtml" runat="server" > <Adapters> <fjx:FileSaverAdapter Runat="server" FolderName="UploadFolder" /> </Adapters> </fjx:FileUploader>