Support forums - Styling attachments table

Support forums » Products » ASP Uploader » Re: Styling attachments table

Styling attachments table

Last post 12-22-2011, 7:59 AM by Kenneth. 1 replies.


	Sort Posts: Previous Next

12-20-2011, 3:07 PM 72377

jerry2
Joined on 10-18-2010
Posts 32

Styling attachments table

Reply Quote

Is there any easy way to change the graphics of the attachements table? Namely the icons, like the circle.png? I can probobaly change the icon itself in the resources folder but I need different icons on different parts of my site (I am making uploader for images now as instead of circle.png there would be image icon etc.).

Is there any other way to change all this? I know about the attachements demo, I know I can do my own attachements table with it, but it is a lot of code for only changing the way icons display...

Another thing is your demo only changes the way that the attachement table is AFTER upload. How to change the table that shows after the files are selected?

Thanx

PS - I tried changing image circle.png but it insists on the 16 x 16 px size, the html sets width and height. As the JS is encrypted, I can not change this parameter. Is there any way to but non enrypted javascript code (I would encrypt it after the changing parameters and localize it to my language so I would not need to make 20 lines of code each time I use it for localization).

12-22-2011, 7:59 AM 72406 in reply to 72377

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

Re: Styling attachments table

Reply Quote

Hi Jerry2,

Try the example below

<%@ Language="VBScript" %>

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

<head>

<title>

Form - Single File Upload

</title>

</head>

<body>

Dim uploader

Set uploader=new AspUploader

uploader.Name="myuploader"

uploader.InsertText="Upload File (Max 10M)"

uploader.MultipleFilesUpload=true

uploader.render()

</div>

<a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>

</div>

<div >

var uploader = document.getElementById("myuploader");

uploader.handlequeueui=myqueueuihandler;

function myqueueuihandler(list)

{

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.border=1;

table.borderColor="#ededed";

table.width="360px";

table.style.backgroundColor="black";

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="aspuploader/resources/circle.png";

imgFinish.src="aspuploader/resources/uploadok.png";

imgError.src="aspuploader/resources/uploaderror.png";

imgUpload.src="aspuploader/resources/uploading.gif";

imgQueue.src="aspuploader/resources/stop.png";

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;

}

function cancelalltasks()

{

uploader.cancelall();

document.getElementById("queuediv").style.display="none";

}

</script>

</div>

</body>

</html>

Regards,

Ken