Suggestion: Download button, file icon and mouse-over view for images

[chgrnet]

I am using vLookup for a document library and it would be very nice to have these features:
1. A button to click that starts the download process.
2. An icon that shows the file type.
3. If it is an image, a link that could be moused-over to show a small preview of the image.

These are all just “nice to have” features I wanted to share. Thanks!

[Alexander Bautz]

Hi,
Here is a few functions you can use for #1 and #3. #2 is just a matter of adding the field “DocIcon” as ViewField.

1: Download link
Add this to the “Special configuration” in vLookup ViewFields for the field “FileLeafRef”:

{"function":"showDownloadBtn"}

Then add this to the Custom JS:

function showDownloadBtn(a,b){
	var c = [], iArr = ["doc","docx","xls","xlsx"], v = b.get_item("FileLeafRef"), ext = v.split(".").pop();	
	if($.inArray(ext,iArr) > -1){
		// Proper method for other browsers - will open it in IE and not trigger a download
		c.push("<a href='"+b.get_item("FileDirRef")+"/"+v+"' download>Download</a>");
	}
	return c.join("");
}

Change the “iArr” to set the file type to activate this button for.

3: To show images directly, use this code in the “Special configuration” for the ViewField “FileLeafRef” – you can add the same field multiple times if you like to add for example the download link in #1 above.

{"function":"showImage"}

Then add this to the Custom JS:

function showImage(a,b){
	var iArr = ["png","gif","jpeg","jpg"], v = b.get_item("FileLeafRef"), ext = v.split(".").pop();
	if($.inArray(ext,iArr) > -1){
		return "<img src='"+b.get_item("FileDirRef")+"/"+v+"'>";
	}else{
		return a;
	}
}

Change the “iArr” to set the file type to activate this button for.

Best regards,
Alexander

• This reply was modified 8 years, 10 months ago by Alexander Bautz. Reason: messed up HTML
• This reply was modified 8 years, 10 months ago by Alexander Bautz. Reason: Changed code example for download as the "hack" did not work as expected in IE

[chgrnet]

Thank you for this code! I am able to use the “FileLeafRef” in the ViewFields, and I do see a link to the file in the vLookup on the form, but the code does not change. I see you ask that the iArr be updated, but there could be any of those file types, so I would not want to limit what shows.

[Author]

Posts