locked
How to create attachment button on Infopath. RRS feed

  • Question

  • Dear Team,

    I'm using SharePoint 2013 list and creating form using infopath. I can see attachment control in left side of infopath form design, but I want to user buttton as Attachment. So in form user will click on button and attach the file in SharePoint list.

    Can you please advice how to create attachment button on infopath form. OR can i use below attachment control as button.


    • Edited by SP2013Devp Wednesday, March 28, 2018 7:04 AM
    Wednesday, March 28, 2018 6:02 AM

Answers

  • Hi SP2013Devp,

    We can create the attachment button in the InfoPath form by adding custom code.

    Go to the edit form, edit the page, add the script editor web part and add the code below into the script editor web part. And you should change the list name to your list name in the code below.

    <head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script>
    
    function AddAttachments()
    
    {
    
    var digest = "";
    
    $.ajax(
    
    {
    
                    url: "/_api/contextinfo",
    
                    method: "POST",
    
                    headers: {
    
                                    "ACCEPT": "application/json;odata=verbose",
    
                                    "content-type": "application/json;odata=verbose"
    
                    },
    
                    success: function (data) {
    
                    digest = data.d.GetContextWebInformation.FormDigestValue;
    
                    },
    
                    error: function (data) {
    
                                   
    
                    }
    
    }).done(function() {
    
                    var fileInput = $('#uploadFile');
    
                    var fileName = fileInput[0].files[0].name;
    
                    var reader = new FileReader();
    
                    reader.onload = function (e) {
    
                    var fileData = e.target.result;
    
                                    var res11 = $.ajax(
    
                                    {                             
    
                                                    url: "/_api/web/lists/getbytitle('list19')/items(1)/AttachmentFiles/ add(FileName='" + fileName + "')",   
    
    //you should change the list to your list name.
    
                                                    method: "POST",
    
                                                    binaryStringRequestBody: true,
    
                                                    data: fileData,
    
                                                    processData: false,
    
                                                    headers: {
    
                                                                    "ACCEPT": "application/json;odata=verbose",                                                                                                                                   
    
                                                                    "X-RequestDigest": digest,
    
                                                                    "content-length": fileData.byteLength
    
                                                    },                                                                                                                            
    
                                                    success: function (data) {                                            
    
                                                                                                                   
    
                                                    },
    
                                                    error: function (data) {
    
                                                                    alert("Error occured." + data.responseText);
    
                                                    }
    
                                    });                          
    
                    };
    
                    reader.readAsArrayBuffer(fileInput[0].files[0]);
    
    });                                          
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <div>
    
                    <input id="uploadFile" type="file">
    
    </div>
    
    <div>
    
                    <input type="button" onclick="AddAttachments()" value="Add Attachments"> </input>
    
    </div>
    
    </body>

    The result as below:

    For more detailed information, refer to the article below.

    SharePoint 2013 working with file: How to upload attachments to SharePoint list item using REST services.

    http://www.sharepointyammertech.com/2015/04/How-to-upload-attachments-to-SharePoint-list-item-using-REST-services.html

    Best regards,

    Sara Fan


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.


    • Edited by Sara Fan Thursday, March 29, 2018 3:05 AM
    • Marked as answer by SP2013Devp Thursday, March 29, 2018 5:23 AM
    Thursday, March 29, 2018 3:03 AM