Support forums - CSS style and Cancel All Uploads button

Support forums » Products » Ajax Uploader » Re: CSS style and Cancel All Uploads button

CSS style and Cancel All Uploads button

Last post 01-04-2013, 8:35 AM by Kenneth. 1 replies.


	Sort Posts: Previous Next

01-04-2013, 6:48 AM 75577

vecchiato
Joined on 01-04-2013
Posts 1

CSS style and Cancel All Uploads button

Reply Quote

Good Morning !

I'm using on my page(.NET framework 4.0) Ajax Uploader with option ManualStartUpload = "true", but I can't find the CSS to format the list of files on the rise. I tested with the option ManualStartUpload = "false" and I found the CSS, but with the option to "true" I cant find the correct CSS !

Someone already had this problem?

In this same configuration, i cant remove the Cancel All Uploads button, is it possible ?

Please any help !! Thanks a lot

Vecchiato

01-04-2013, 8:35 AM 75578 in reply to 75577

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

Re: CSS style and Cancel All Uploads button

Reply Quote

Hi,

If you just need to hide the cancel all button, please add the style code below into your page.

<style>
.AjaxUploaderCancelAllButton {
display: none !important;
}
</style>

If you need to custom the whole queue table style, then you can need generate your own queue table, like the example below.

<%@ Page Language="C#" Title="Customize the queue UI" %>
<%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<div>
<CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" ManualStartUpload="true">
</CuteWebUI:UploadAttachments>
<asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
Text="Submit" />
</div>
<br />
<div id="queuediv" style="display: none;">
<div id="queuedivtablecontainer">
</div>
</div>
</form>
</body>
<script>
var uploader = document.getElementById("<%=UploadAttachments1.ClientID %>");
uploader.handlequeueui = myqueueuihandler;
function myqueueuihandler(list) {
if (list.length < 2) {
document.getElementById("queuediv").style.display = "none";
}
else {
document.getElementById("queuediv").style.display = "";
var container = document.getElementById("queuedivtablecontainer");
container.innerHTML = "";
var table = document.createElement("table");
table.style.borderCollapse = "collapse";
table.cellSpacing = 0;
table.cellPadding = 4;
table.border = 1;
table.borderColor = "darkgreen";
for (var i = 0; i < list.length; i++) {
var img = document.createElement("IMG");
var imgFinish = document.createElement("IMG");
var imgError = document.createElement("IMG");
var imgUpload = document.createElement("IMG");
var imgQueue = document.createElement("IMG");
img.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=circle.png&_ver=634009764514705972";
imgFinish.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploadok.png&_ver=634009764514705972";
imgError.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploaderror.png&_ver=634009764514705972";
imgUpload.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=uploading.gif&_ver=634009764514705972";
imgQueue.src = "CuteWebUI_Uploader_Resource.axd?type=file&file=stop.png&_ver=634009764514705972";
var name = list[i].FileName
var size = list[i].FileSize // (or -1)
var stat = list[i].Status // Finish|Error|Upload|Queue
var func = list[i].Cancel;
var row = table.insertRow(-1);
row.insertCell(-1).appendChild(img);
row.insertCell(-1).innerHTML = name;
var last = row.insertCell(-1);
if (stat == "Queue") {
imgQueue.onclick = func;
last.appendChild(imgQueue);
}
else if (stat == "Finish") {
last.appendChild(imgFinish);
}
else if (stat == "Error") {
last.appendChild(imgError);
}
else if (stat == "Upload") {
last.appendChild(imgUpload);
}
}
container.appendChild(table);
}
return false; //hide the default;
}
</script>
</html>

Regards,

Ken