Page 1 of 1
Show document icon in attachment
Posted: 26 Oct 2017
by 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?
Re: Show document icon in attachment
Posted: 26 Oct 2017
by 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?
Re: Show document icon in attachment
Posted: 27 Oct 2017
by 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 1700 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.
Re: Show document icon in attachment
Posted: 30 Oct 2017
by Katy
Thank you, Nikita! Works great!!!
