Support forums - How do one position file list

Support forums » Products » Ajax Uploader » How do one position file list

How do one position file list

Last post 03-01-2012, 6:17 AM by Kenneth. 1 replies.


	Sort Posts: Previous Next

02-29-2012, 10:57 AM 73263

ScottDolan
Joined on 10-05-2011
Posts 11

How do one position file list

Reply Quote

I am currently using ajax uploader on website i am in the progress of building. I am using a custom browse for file / upload button which was easy to place. I also centered the upload progress bar in the middle of my div. However, the file list is not centered in my div.. How do, i center the file list?

The Progress Bar

The File List

The Source Code

<div style="float:left; margin:0px 0px 0px 0px; border:thin solid transparent; width:675px;" >
<p style="text-align:center; margin:0px;" >Select an image file on your computer (4MB max): </p>
<p style="text-align:center; margin:0px;" >
<asp:Image ImageUrl="~/Images/selectanimage.png" runat="server" ID="Image1" style="margin:10px auto 0px auto;" />
</p>
<div style="text-align:center; margin:0px auto 0px auto; width:400px; border:thin solid transparent; " >
<CuteWebUI:Uploader ID="FileUploader1" ClientIDMode="Static" ProgressLabelStyle-CssClass="DialogLabel" MaxFilesLimit="1" runat="server" TempDirectory="~/UploaderTemp"
OnUploadCompleted="Uploader1_UploadCompleted" InsertButtonID="Image1" >
<ValidateOption AllowedFileExtensions=".png,.jpg,.bmp,.jpeg,.gif, ," />
</CuteWebUI:Uploader >
<asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()" Text="Submit" style="display:none;" />
<div style="clear:both;" ></div>
</div>
<asp:Panel ID="ImagePanel" ClientIDMode="Static" runat="server" style="margin:10px auto 0px auto; padding:0px; border:thin solid transparent; width:675px;" >
<p style="margin:10px 0px 0px 0px; text-align:center;" class="DialogLabel" >Crop the image area you wish to use as your button</p>
<p style="text-align:center; margin:0px;" >
<asp:Panel ID="ImageDiv" ClientIDMode="Static" runat="server" style="clear:both; margin:0px 0px 0px 0px; border:thin solid black; background-image:url(../Images/workarea.png); " >
<asp:Image ID="resizebleImage" ClientIDMode="Static" runat="server" style="clear:both; margin:8px 0px 0px 10px; border:thin solid red;" />
</asp:Panel>
</p>
</asp:Panel>
</div>

03-01-2012, 6:17 AM 73270 in reply to 73263

Kenneth
Joined on 02-13-2008
Posts 3,886

Re: How do one position file list

Reply Quote

Hi ScottDolan,

You can custom the attachment table to achieve your own style setting of it.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

protected void Attachments1_PreRender(object sender, EventArgs e)

{

Attachments1.GetItemsTable().Visible = false;

DataList1.DataSource = Attachments1.Items;

DataList1.DataBind();

}

protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)

{

Attachments1.Items[e.Item.ItemIndex].Remove();

}

</script>

<title>Untitled Page</title>

</head>

<body>

<div>

<CuteWebUI:UploadAttachments InsertText="Upload Multiple files Now" runat="server"

OnPreRender="Attachments1_PreRender" ID="Attachments1">

</CuteWebUI:UploadAttachments>

<asp:DataList ID="DataList1" runat="server" OnItemCommand="DataList1_ItemCommand" style="margin-left:500px">

<table cellpadding="0" cellspacing="0" border="0" style="border-top: solid 1px #ededed;

border-bottom: solid 1px #ededed;">

<tr>

<%# Eval("FileName") %>

(

<%# Eval("FileSize") %>

Byte )

</td>

<asp:LinkButton ID="remove" runat="server">remove</asp:LinkButton></td>

</tr>

</table>

</ItemTemplate>

</asp:DataList>

</div>

</form>

</body>

</html>

Regards,

Ken