Attachment Control in Newform and Edit form of a list Using Jquery

Question

Has any one tried inserting Attachment control in Newform and Display form using Jquery with out going for Custom forms from Designer. I know we can add an attachment control through designer.

When i look at the DOM there is a class called .MS-formtable. Can i insert a attachment control with appending to this table by using the class name. Attached is the DOM model.

We can use Display templates (CSR)??

Answer 1

By default, the Attachment is hidden in list form. We can add the CSS style into script editor web part in display/new form page.

<style type="text/css">
#idAttachmentsRow{
    display: black !important;
}
</style>

If you don't want to use the Ribbon to attach file, we can use the code below to add the attach file control into a row of table.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var attachHTML='<tr><td width="190" height="15" class="ms-formlabel" valign="top">Attach File</td><td height="15" class="ms-formbody" id="attachmentsOnClient" valign="bottom"><span dir="ltr"><input name="fileupload0" title="Name" class="ms-fileinput" id="onetidIOFile" type="file" size="56"></span></td></tr><tr><td>&nbsp;</td><td><input class="ms-ButtonHeightWidth" id="attachOKbutton" onclick="OkAttach()" type="button" value="Attach"><span class="ms-SpaceBetButtons" id="idSpace"></span><input class="ms-ButtonHeightWidth" id="attachCancelButton" accesskey="C" onclick="CancelAttach()" type="button" value="Cancel"></td></tr>';
    $(".ms-formtable").append(attachHTML);
})
</script>

Answer 2

You can try Stratus Forms. It uses jQuery and SPServices to build a nice and easy forms in SharePoint.