Add Attachment to the List Item Using REST API in SharePoint

Hi All,

In a following post we will see  how to add attachment to the List Item by using REST API in SharePoint 2013.In One my post we have already seen Add List items using REST API.
We need to add JQuery reference to our script.In a following post I am adding reference from http://code.jquery.com/jquery-1.10.2.js

Please find the below Code Snippet, which was used in SharePoint Hosted Apps, You need to change the code (Url like HostUrl and AppUrl ) if you want to use the same code in regular development.

'use strict';

var SPAppWebUrl;

var SPHostUrl;

(function () {

    // This code runs when the DOM is ready and creates a context object which is

    // needed to use the SharePoint object model

    $(document).ready(function () {

        SPHostUrl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));

        SPAppWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

        ItemSubmit();

    });

    function getQueryStringParameter(urlParameterKey) {

        var params = document.URL.split('?')[1].split('&');

        var strParams = '';

        for (var i = 0; i < params.length; i = i + 1) {

            var singleParam = params[i].split('=');

            if (singleParam[0] == urlParameterKey)

                return decodeURIComponent(singleParam[1]);

        }

    }

    function ItemSubmit() {

        //Button click Event to upload files to List Item

        $("#btnSubmit").click(function () {

            //checking Whether document is uploaded or not - Validation

            if (document.getElementById("inputFile").files.length === 0) {

                alert("Select a file..and click on submit");

                return;

            }

            else {

                //Reading the Uploadef file values

                var parts = document.getElementById("inputFile").value.split("\\");

                var filename = parts[parts.length - 1];

                var file = document.getElementById("inputFile").files[0];

                //TestList - is our Listname

                //1 - is our List Item ID

                //filename - File Name of the attachment

                //file - file data

                uploadFileSP("TestList", "1", filename, file);

            }

        });

    }

    function getFileBuffer(file) {

        var deferred = $.Deferred();

        var reader = new FileReader();

        reader.onload = function (e) {

            deferred.resolve(e.target.result);

        }

        reader.onerror = function (e) {

            deferred.reject(e.target.error);

        }

        reader.readAsArrayBuffer(file);

        return deferred.promise();

    }

    //Used to Add Attachemnt to List Item

    function uploadFileSP(listName, id, fileName, file) {

        var deferred = $.Deferred();

        getFileBuffer(file).then(

              function (buffer) {

                  var bytes = new Uint8Array(buffer);

                  var content = new SP.Base64EncodedByteArray();

                  var queryUrl = SPAppWebUrl + "/_api/SP.AppContextSite(@target)" + "/web/lists/getbytitle('" + listName + "')/items(" + id +

    ")/AttachmentFiles/add(FileName='" + file.name + "')?" + "@target='" + SPHostUrl + "'";

                  $.ajax({

                      url: queryUrl,

                      type: "POST",

                      processData: false,

                      contentType: "application/json;odata=verbose",

                      data: buffer,

                      headers: {

                          "accept": "application/json;odata=verbose",

                          "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                          "content-length": buffer.byteLength

                      }, success: onAttachmentSucess,

                      error: onAttachmentFailure

                  });

              },

                function (err) {

                    deferred.reject(err);

                });

        return deferred.promise();

    }

    function onAttachmentSucess() {

        alert("Successfully Saved Attachment");

    }

    function onAttachmentFailure(error) {

        alert("Attachment Failure:" + error.status + "," + error.statusText);

    }

})();

In Default.aspx

<div>

    <p id="message">

        <!-- The following content will be replaced with the user name when you run the app - see App.js -->

        <input type="file" id="File1" />

        <input type="button" id="Button1" value="Submit">

    </p>

</div>

Regular Way:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        var context;

        var web;

        var Url;

        var listItemEntity;

        $(document).ready(function () {

            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', FunctionReady);

            ItemSubmit();

        });

        function FunctionReady() {

            context = new SP.ClientContext.get_current();

            web = context.get_web();

            context.load(web);

            context.executeQueryAsync(onRequestSuccess, onRequestFailure);

        }

        function onRequestSuccess() {

            Url = web.get_url();

            GetListItemEntity(Url);

        }

        function onRequestFailure(sender, args) {

            alert("Error Occured:" + args.get_message());

        }

        //Used to get the List Item Entity Type

        function GetListItemEntity(webUrl) {

            var queryUrl = webUrl + "/_api/lists/getbytitle('TestList')?$select=ListItemEntityTypeFullName";

            $.ajax({

                url: queryUrl,

                method: "GET",

                headers: { "Accept": "application/json;odata=verbose" },

                success: onEntitySuccess,

                error: onEntityFailure

            });

        }

        function onEntitySuccess(data) {

            listItemEntity = data.d.ListItemEntityTypeFullName;

        }

        function onEntityFailure(err) {

            alert(err.statusText);

        }

        function ItemSubmit() {

            //Button click Event to upload files to List Item

            $("#btnSubmit").click(function () {

                //checking Whether document is uploaded or not - Validation

                if (document.getElementById("inputFile").files.length === 0) {

                    alert("Select a file..and click on submit");

                    return;

                }

                else {

                    //Reading the Uploadef file values

                    var parts = document.getElementById("inputFile").value.split("\\");

                    var filename = parts[parts.length - 1];

                    var file = document.getElementById("inputFile").files[0];

                    //TestList - is our Listname

                    //1 - is our List Item ID

                    //filename - File Name of the attachment

                    //file - file data

                    uploadFileSP("TestList", "1", filename, file);

                }

            });

        }

        function getFileBuffer(file) {

            var deferred = $.Deferred();

            var reader = new FileReader();

            reader.onload = function (e) {

                deferred.resolve(e.target.result);

            }

            reader.onerror = function (e) {

                deferred.reject(e.target.error);

            }

            reader.readAsArrayBuffer(file);

            return deferred.promise();

        }      

        function uploadFileSP(listName, id, fileName, file) {

            var deferred = $.Deferred();

            getFileBuffer(file).then(

              function (buffer) {

                  var bytes = new Uint8Array(buffer);

                  var content = new SP.Base64EncodedByteArray();

                  var queryUrl = Url + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')";

                  $.ajax({

                      url: queryUrl,

                      type: "POST",

                      processData: false,

                      contentType: "application/json;odata=verbose",

                      data: buffer,

                      headers: {

                          "accept": "application/json;odata=verbose",

                          "X-RequestDigest": $("#__REQUESTDIGEST").val(),

                          "content-length": buffer.byteLength

                      }, success: onAttachmentSucess,

                      error: onAttachmentFailure

                  });

              },

                function (err) {

                    deferred.reject(err);

                });

            return deferred.promise();

        }

        function onQuerySucess() {

            alert('Attachement Added Successfully');

        }

        function onQueryFailure(error) {

            alert("Failure:" + error.status + "," + error.statusText);

        }

    </script>

</head>

<body>

    <input type="file" id="inputFile" />

    <input type="button" id="btnSubmit" value="Submit">

</body>

</html>

As part of demo, I have added the above script in Content Editor.Our Page will contain one File Upload Control and Submit button.
On clicking on submit button we will adding attachment to the existing list Item.
After Adding Script to Content Editor , It will look as follows,

final , output will be look as follows as a success message.

You can download the file from the below link,

https://sites.google.com/site/sharepointkitchenblog/Attachment.html

Thanks.

Related Post

SharePoint 2013

• List view render using JSLink with Fabric UI
• Delete Quick Links using Powershell
• delete/Add Top Navigation Links using Powershell
• Get CheckedOut Files from SharePoint 2013 and MOSS2007
• PowerShell::Get Content Database Size in SharePoint
• PowerShell :: Delete All List Items
• Powershell :: Apply Master Page to all sub sites under site collection
• Internet Explorer cannot display this feed - while accessing REST URL in SharePoint
• SharePoint Installation: The tool was unable to install application server role web server (IIS) role SharePoint 2013.
• Basics: Difference between Synchronous Events and Asynchronous Events in SharePoint
• Remove-SPSite 0x80070003 - Forcely delete Site Collection that cannot be deleted
• This operation can be performed only on a computer that is joined to a server farm by users who have permissions in SQL Server to read from the configuration database. To connect this server to the server farm, use the SharePoint Products Configuration Wizard, located on the Start menu in Microsoft SharePoint 2010 Products.
• Restore-SPSite: The operation that you are attempting to perform cannot be completed successfully.
• Migrate Multiple site(sub sites) using MetaLogix and change the Template in Target
• Issue:The date file "C:\ProgramData\Metalogix\EnvironmentSettings.xml" contains invalid data.Values in that file reset to defaults
• Get List Field Type using ECMA Script in SP Hosted Apps
• SharePoint Interview Questions and Answers..
• Issues:SharePoint Foundation 2013 Prerequisites installation(off line) on Windows Server2012 R2
• Get Choice Field Type Values using ECMA Script
• Something Went wrong error message while deploying App in SharePoint 2013
• The Server was unable to save the form at this time. Please try again.
• Get the Items inside the Folder in document Library in SharePoint 2013 using REST API
• SharePoint Client Browser for SharePoint Online and SharePoint On-Premises
• What is Managed meta data service in SharePoint 2010, 2013 and How to Configure it?
• Deprecated features in SharePoint 2013

REST API

• Internet Explorer cannot display this feed - while accessing REST URL in SharePoint
• Get the Items inside the Folder in document Library in SharePoint 2013 using REST API
• XMLHttpRequest: Network Error 0x2eff, Could not complete the operation due to error 00002eff.
• Insert Items into List by using REST API in SharePoint 2013
• Read List Items using REST API