Show document icon in attachment

[Katy]

I was using this info to create a preview of pictures in attachments and it is working perfectly fine, thank you! But i have mixed attachments to my list: mostly MS office documents + PDFs and i need to show at least icons for those ones, 'cos without it it looks bad:



And the second question: would it be possible to link the preview with actual attachment links?

[Katy]

i believe one way to do it is to save icons for file types and then set up some IF condition in that script to pick up a certain picture when the file name in attachment contains .XXX... Am i thinking in right direction? But how to specify that condition for attachment?

[Nikita Kurguzov]

Hello, Katy!
You can try something like this:

Code: Select all

var preview = "";
var re = /(?:\.([^.]+))?$/;

$("a[href*='/Attachments/'").each(function(){
	var name = $(this).text();
	preview += "<a href='" + $(this).attr("href") + "'>";
	var ext = re.exec(name)[1];
	if (ext == "txt"){
	preview += "<img alt='txt' class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Text-txt.svg/262px-Text-txt.svg.png'>";
	}
	else if (ext == "pdf"){
	preview += "<img alt='pdf' class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Pdf_by_mimooh.svg/225px-Pdf_by_mimooh.svg.png'>";
	}
	preview += "<span> " + name + "</span></a>";
});

if (preview == "") { 
	preview = "There are no items to display."
}


$(".imgPreview").html(preview);

This will extract file extensions and with if blocks you can check what kind of file it is. You still need icons to display them though, so here I've used txt and pdf icons from Wikipedia. This one and this one.

AttachmentIcons.png (24.88 KiB) Viewed 1701 times

Finally, this code also transforms icons and names into links to the actual attachments, so you can even hide the attachments field, just don't remove it from the form.

[Katy]

Thank you, Nikita! Works great!!!