Monthly Archives: June 2015

QuickTip: SharePoint Attachment Field in List Forms

Attachment field in form

To show the attachment field in the form as in the above screenshot without the need to click the ‘Add attachment’-button in the ribbon, simply edit the form and put the script below into a Script Editor Webpart. This Script requires jQuery.

jQuery(document).ready(function(){
	//Get all the ribbon buttons from the action-group
	var $ribbonAttachButton = $("#Ribbon\\.ListForm\\.Edit\\.Actions a")
	//If the 'Add Attachment'-button is the only button in the group then hide the group, otherwise just hide the button 
	$ribbonAttachButton.length == 1 && $ribbonAttachButton.closest("li").hide() || $ribbonAttachButton.hide()
	//Get the iportant elements of the hidden attachment field
	var $attachElements = $("#csrAttachmentUploadDiv > #partAttachment > table > tbody > tr:eq(1),#csrAttachmentUploadDiv > #partAttachment > table > tbody > tr:eq(4)")
	//Get the 'OK'- & 'Cancel'-button
	var $attachButtons  = $attachElements.find(".ms-attachUploadButtons")
	//Insert an empty cell in order to adjust to the form's layout
	$("<td></td>").insertBefore($attachButtons)
	//Align buttons to the left
	$attachButtons.css("text-align","left")
	//Remove some margin and rename the 'OK'-button
	$attachButtons.find("#attachOKbutton").css("margin-left",0).val("Attach")
	//Adjust the fields label to match the rest of the form, adjust the height
	$attachElements.find(".ms-formlabel").html("<h3 class='ms-standardheader'>Add Attachments</h3>").css({"height":"auto","width":"auto"})
	//Make the file-selector bigger
	$attachElements.find("#onetidIOFile").addClass("ms-longfileinput")
	//Move elements to the end of the form table
	$attachElements.appendTo($("#part1 > .ms-formtable"))
})