Attachments in csrlistform are not working

See more:

SharePoint2013

`I am using CSRListForm in a list (new list item). The columns work fine but the attachments are not working.

When I click on the attachments icon, I get the error "span with id part1 does not exist".

Can you please share some sample CSR implementation that uses attachments in the new form as well as edit form.

Thanks in advance.

What I have tried:

(function () {

// Create object that have the context information about the field that we want to change it's output render
var formTemplate = {};
formTemplate.Templates = {};
formTemplate.Templates.View = viewTemplate;

formTemplate.Templates.Fields =
{

"FileUpload": { 'NewForm' : CustomField, }

};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(formTemplate);

})();

function viewTemplate(ctx)

{

var formTable = "".concat(
"<table width='100%' cellpadding='5' class='ms-formtable' >",
"<tr>",
"<td><div>Title</div></td>",
"<td><div>{{TitleCtrl}}</div></td>",
"<td><div>Date</div></td>",
"<td><div>{{DateCtrl}}</div></td>",
"</tr>",
"<tr>",
"<td><div>Category</div></td>",
"<td><div>{{CategoryCtrl}}</div></td>",
"<td><div>Active</div></td>",
"<td><div>{{ActiveCtrl}}</div></td>",
"</tr>",
"<tr>",
"<td><div>File Upload</div></td>",
"<td><div>{{FileuploadCtrl}}</div></td>",
"</tr>",
'<tr id="idAttachmentsRow" style="">',
'<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="Attachments">',
'<nobr>Attachments</nobr>',
'</span></td>',
'<td valign="top" width="350px" class="ms-formbody">',

'<table border="0" cellpadding="0" cellspacing="0" id="idAttachmentsTable"></table>',
'</td>',
'<script type="text/javascript">',
'/* <![CDATA[ */',
"if (typeof ShowAttachmentRows == 'function')",
"ShowAttachmentRows();",
'/* ]]> */',
'</script>',
"</tr>",
"<tr>",
"<td></td>",
"<td><input type='button' value='Save' onclick=\"SPClientForms.ClientFormManager.SubmitClientForm('{{FormId}}')\" style='margin-left:0' ></td>",
"</tr>",
"</table>");

formTable = formTable.replace("{{TitleCtrl}}", getSPFieldRender(ctx, "Title"));
formTable = formTable.replace("{{DateCtrl}}", getSPFieldRender(ctx, "Date"));
formTable = formTable.replace("{{CategoryCtrl}}", getSPFieldRender(ctx, "Category"));
formTable = formTable.replace("{{ActiveCtrl}}", getSPFieldRender(ctx, "Active"));
formTable = formTable.replace("{{FileuploadCtrl}}", getSPFieldRender(ctx, "FileUpload"));
formTable = formTable.replace("{{FormId}}", ctx.FormUniqueId);

return formTable;
}

function CustomField(ctx)
{

return '<table><tr><td valign="top" class="ms-formbody" id="attachmentsOnClient" style="width: 434px">'+
'<span dir="ltr">'+
'<input type="file" name="fileupload0" class="ms-longfileinput" id="onetidIOFile" size="56" title="Name" style="width:300px;"> </input>'+
'</span>'+
'</td>'+
'<td width="100px" valign="top" class="ms-formbody">'+

'<input name="Button1" type="button" value="Attach" onclick="OkAttach()"/>'+
'<span id="idSpace"></span>'+
'</td>'+
'</tr></table>';

}


function getSPFieldRender(ctx, fieldName)
{
var fieldContext = ctx;

//Get the filed Schema
var result = ctx.ListSchema.Field.filter(function( obj ) {
return obj.Name == fieldName;
});

//Set the field Schema & default value
fieldContext.CurrentFieldSchema = result[0];
fieldContext.CurrentFieldValue = ctx.ListData.Items[0][fieldName];

//Call OOTB field render function
return ctx.Templates.Fields[fieldName](fieldContext);
}