SharePoint 2013 custom Attach File button

Question

I'm trying to create a custom "Attach File" button in my SharePoint 2013 New Item form. So far this is what I've done:

HTML

 <div onclick="javascript:openpageindialog();" class="btn" style="float: left;">Attach File</div>

JS:

function openpageindialog() {
var options = SP.UI.$create_DialogOptions();
options.title = "Attach File";
options.url = '/_layouts/Attachfile.aspx?ListId={My-ListId}&ItemId=4';
options.autoSize = true;
options.showClose = true;
options.showClose = true;
options.allowMaximize = false;
// options.dialogReturnValueCallback = callback;
SP.UI.ModalDialog.showModalDialog(options);
}

This works just fine, but this the issue. As you notice I addded "ItemId=4" for testing purposes, but this a New Item form; therefore there is not ItemId yet. Is there any work around this? I would hate to create a New Item form and then add the Attach File button to an Edit Form after the Id has been created. Just FYI, unfortunately, I can't use any server side code Thanks!

Answer 1

Create a Custom "New Form" Using SharePoint Designer. You will be able to see all the code for all fields, Now add a new attachment field there and bind it using xslt. Bewlow is the code.

<SharePoint:AttachmentButton runat="server" id="attachmentnew" ControlMode="New" __designer:bind="{ddwrt:DataBind('i','attachmentnew','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"></SharePoint:AttachmentButton>

Answer 2

You don't need to reinvent it, the code is there and you need to call the function called "UploadAttachment()". For example, you can use a button to cal it:

<input type="button" value="Attach File" onclick="javascript:UploadAttachment()" />