Create an Add attachment button to Custom New/Edit form SharePoint 2016

Question

I have developed a custom New form in SharePoint 2016 with HTML and JavaScript. I want to allow the user the ability of adding an attachment. I looked through several articles, but can't get the page to accept the attachment. Any help in pointing me in the right direction, greatly appreciated.

Michael Williams

Answer 1

Hi @Michael Williams ,
I have tested a code to upload attachment to a list item. Please refer to following code
155522-uploadattachment.txt

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

To alleviate the ID issue, I added code to add the attachment after a successful add item so that it knew what the ID actually is. However, it won't add the attachment. I receive no error message it just stops at the register function.

function querysuccess30(){
console.log('Get ID');
var listItemInfo = '';
var itemLink = "";
var listItemEnumerator1 = listItems.getEnumerator();
var divHTML ='';
listItemEnumerator1.moveNext();
var oListItem = listItemEnumerator1.get_current();
var Intake = oListItem.get_item('ID');
ID1 = Intake;
console.log(ID1);
document.querySelector("#appRoot > div.Files-hostContainer > div > div.od-OverlayHost > div > div > div.od-Panel.od-Panel--md.od-panel-md-listform.od-Panel--hiddenScroll.od-Panel--hasCommandBar.od-Panel--hasPadding > div > div > div.list-form-wrapper.list-form-client.list-form-client--withRightPane > div > div > div > div > div.ReactClientFormFields > div:nth-child(35)");
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);
}
function registerClick(){
console.log('Register');
//Register File Upload Click Event
$("#addFileButton").click(readFile);
}
function readFile() {
console.log('Read File');
//Get File Input Control and read th file name
var element = document.getElementById("attachment-file-name");
var file = element.files[0];
var parts = element.value.split("\");
var fileName = parts[parts.length - 1];
//Read File contents using file reader
var reader = new FileReader();
reader.onload = function(e) {
uploadFile(e.target.result, fileName);
}
reader.onerror = function(e)
{
alert(e.target.error);
}
reader.readAsArrayBuffer(file);
}

    function uploadFile(arrayBuffer, fileName)     
    {    
        //Get Client Context and Web object.    
        clientContext = new SP.ClientContext();    
        var oWeb = clientContext.get_web();    

        //Get list and Attachment folder where the attachment of a particular list item is stored.    
        var oList = oWeb.get_lists().getByTitle('NewList');    
        var attachmentFolder = oWeb.getFolderByServerRelativeUrl('/sites/Repository/Lists/NewList/Attachments/' +ID1);    

        //Convert the file contents into base64 data    
        var bytes = new Uint8Array(arrayBuffer);    
        var i, length, out = '';    
        for (i = 0, length = bytes.length; i < length; i += 1) {    
            out += String.fromCharCode(bytes[i]);    
        }    
        var base64 = btoa(out);    
        //Create FileCreationInformation object using the read file data    
        createInfo = new SP.FileCreationInformation();    
        createInfo.set_content(base64);    
        createInfo.set_url(fileName);    

        //Add the file to the list item    
        attachmentFiles = attachmentFolder.get_files().add(createInfo);    

        //Load client context and execute the batch    
        clientContext.load(oList);    
        clientContext.load(attachmentFiles);    
        clientContext.executeQueryAsync(QuerySuccessAT, QueryFailureAT);    
    }