Multiple attachment buttons (not unique fields) in custom form

Question

I'm building a custom form with branching logic - basically if they tick box A they need to upload form A, and if they tick box B they need to upload form B.

I know you can attach multiple documents to one SharePoint item, but I'd like the upload field to appear under both tick boxes (using a simple toggle script to show/hide the upload box).

Basically I just want the same button/field to appear twice in my form. I'm not aiming for multiple upload columns, just instances of the button

The code I'm using to display the field is:

<div class="formrow" id="letter">
<div  valign="top" class="ms-formlabel">
<h3 class="ms-standardheader">
<nobr>Attach letter of invitation</nobr>
</h3>
</div>
<div class="ms-formbody" id="attachmentsOnClient" style="width: 434px">
<span dir="ltr">
<input type="file" name="fileupload0"  id="onetidIOFile" size="56" title="Name">              </input>
</span>
</div>
<div class="ms-formbody">
<input name="Button1" type="button" value="Attach" onclick='OkAttach()'       style="width: 6em; height: 3em" />
<span id="idSpace"></span>
</div>

Using this code I can get the field to display twice (one under the checkbox A and one under checkbox B) but it only allows uploads from the first instance - when trying to upload files using the second instance I get this error

You must specify a non-blank value for File Name.

Does anyone know how to work around this?

AlexZh · Accepted Answer · 2018-06-01 08:00:07Z

OkAttach() function is defined in form.js file. After executing it hides input and places the new one with increment name and id (fileupload0 -> fileupload1).

What I used for multiattach:

var g=FileuploadString+String(FileUploadIndex),c=GetAttachElement(g); - is core code to get current file input.

c.style.display="none"; - to hide core input.

The following JS-functions based on code from form.js:

function OkAttachMulti(fieldId){
    var c=document.getElementById(fieldId), //your input field
        b=TrimWhiteSpaces(c.value); //path to file
    if(!Boolean(b))
    {
        alert(Strings.STS.L_FileNameRequired_TXT);
        c.focus();
    }
    else
    {
        var j=b.substring(b.lastIndexOf("\\")+1);
        if(IndexOfIllegalCharInUrlLeafName(j)!=-1)
        {
            alert(Strings.STS.L_IllegalFileNameError);
            return;
        }
        else
        {
            AddAttachFile(b); // add file to attachments table on the form
        }
        var k=c.form;
        k.encoding="multipart/form-data";
        document.getElementById("idAttachmentsRow").style.display=""; //display attachments table
        AddNewFileInput(); //add new core file input
    }
}

function AddAttachFile(b)
{
    var g=FileuploadString+String(FileUploadIndex),
        c=GetAttachElement(g),
        d=document.getElementById("idAttachmentsTable").insertRow(-1),
        h="attachRow"+String(FileUploadIndex);
    d.id=h;
    var e=d.insertCell(-1);
    e.className="ms-vb";
    e.innerHTML='<span dir="ltr">'+b+"</span>&nbsp;&nbsp;&nbsp;&nbsp;";
    var f=d.insertCell(-1);
    f.className="ms-propertysheet";
    var l=document.getElementsByName("RectGifUrl")[0];
    f.innerHTML='<span class="ms-delAttachments"><IMG SRC=\''+l.value+"'>&nbsp;<a href='javascript:RemoveLocal(\""+h+'","'+g+"\")'"+(IsNullOrUndefined(Strings.STS.L_DeleteAttachment_Text)?"":' aria-label="'+STSHtmlEncode(String.format(Strings.STS.L_DeleteAttachment_Text,b)))+'">'+Strings.STS.L_Delete_Text+"</a></span>";
    ++FileUploadIndex;
    ++FileUploadLocalFileCount;
    c.style.display="none"; //don't need with multiple type file input
}

function AddNewFileInput()
{
    var i=document.getElementById("attachmentsOnClient"),
        a=document.createElement("input");
    a.tabIndex=1;
    a.type="File";
    a.className="ms-longfileinput";
    a.title=Strings.STS.L_FileUploadToolTip_text;
    a.name=FileuploadString+String(FileUploadIndex);
    a.id=FileuploadString+String(FileUploadIndex);
    a.size="56";
    i.appendChild(a);
}

Additionally, if you use this code directly on form page (not from script editor webpart), you must encode special characters (<,>,",',&) in the strings values (e.innerHTML='<span dir="ltr">'+b+"</span>    "; -> e.innerHTML='<span dir="ltr">'+b+"</span>&nbsp;&nbsp;&nbsp; ";)

UPD: if your input has multiple="multiple" attribute, then OkAttachMulti's part would be:

var fileArr = b.split(",");
for(f in fileArr)
{
    var fname = fileArr[f];
    var j=fname.substring(fname.lastIndexOf("\\")+1);
    if(IndexOfIllegalCharInUrlLeafName(j)!=-1)
    {
        alert(Strings.STS.L_IllegalFileNameError);
        return
    }
    else
    {
        AddAttachFile(fname);
    }
}

Stack Exchange Network

Multiple attachment buttons (not unique fields) in custom form

1 Answer 1

Your Answer

Hot Network Questions

Multiple attachment buttons (not unique fields) in custom form

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions