How to GET Attachments from the SharePoint List by using REST API and JAVASCRIPT (Hosted App)

-
Introduction:

      Hey guys This is Siva from Chennai. I'm the SharePoint Developer. I have Come up with this awesome guide for you all to help you out from the struggles which you facing rightnow.

     Here I'm explained how to get the list attachments from the SharePoint list using REST API and JavaScript.

     I have used SharePoint-Hosted Add-In to do this Demo.

     Lets Explore............⏩


 Steps:


  1. Open Visual Studio( I have used Visual Studio 2017) for this example.
  2. File --> New --> Project --> Office/SharePoint --> SharePoint Add-in --> Give Name and Solution Name for the Project --> Click Next -->Give your Developer Site  URL (ex: https://example.sharepoint.com/sites/DeveloperSite/) then --> Select SharePoint-Hosted in radio button -->Select your Version of SharePoint and Click Finish.

  3. Copy and Paste my Html in (Default.aspx) page.
  4. Copy and Replace with my Script in (App.js) file.
  5. Give Permission in AppMainfest.xml.
  6. Create a Custom List With Attachment file in SharePoint
  7. Now Build and Deploy (CNTL+F5)
  8. Output with the List Attachment
Things to Modify in this Code:
  1. Replace the List Name (DemoCustomList) into (Your List Name)
Default.aspx:

     <%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <%--<div>
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>--%>

    <div id="attachmentid">

        <!--Attachment From the SharePoint List Comes Here-->

    </div>

</asp:Content>
-------------------------------------------------------------------------------------------------------------

App.Js:

'use strict';
var hostWebUrl;
var appWebUrl;
ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage() {
    $(document).ready(function () {
        GetAttachmentImage();
    });
}

function GetAttachmentImage() {
    $.ajax({
        async: true,  // Async by default is set to true load the script asynchronously
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/Getbytitle('DemoCustomList')/items?$expand=AttachmentFiles",   // URL to fetch data from sharepoint list
        method: "GET",  //Specifies the operation to fetch the list item
        headers: {
            "accept": "application/json;odata=verbose",   //It defines the Data format
            "content-type": "application/json;odata=verbose"   //It defines the content type as JSON
        },
        success: function (data) {
            data = data.d.results;
            //Iterate the data
            $.each(data, function (index, value) {
                var AttachmentUrl = value.AttachmentFiles.results[0].ServerRelativeUrl;
                $('#attachmentid').append("<img src='" + AttachmentUrl + "' >");  //Appending the Attachment into Page
            });
        },
        error: function (error) {
            console.log(JSON.stringify(error));
        }
    })
}

-------------------------------------------------------------------------------------------------------------

Thanks for your valuable time and feel free to ask me your doubts.......

Comments

  1. Praveen Kumar KNovember 4, 2019 at 10:04 PM

    Nice Article

    ReplyDelete
  2. Siva MurugavelNovember 4, 2019 at 11:26 PM

    Thank You, Mr Praveen Kumar K

    ReplyDelete
  3. QuiTecMay 11, 2022 at 3:32 AM

    Thank you so much to share such an amazing and informative article. Keep us updating with more interesting articles. Also, visit at Sharepoint Development

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Make Attachment Column in SharePoint List Mandatory?

-
Image
     Hi, today I'm ready with the next customization in SharePoint list....Yes, today we gonna see how to make the attachment field in SharePoint list MANDATORY.      We gonna achieve this by doing simple steps !!!!!!! Just follow the steps which I given down :) Steps ( For New Form ): Open your SharePoint list where you want to make the Attachment Column Mandatory or Required. Enabling the Attachment Column in Views (All Items) [Note: we don't need to create a separate column for Attachment because we have it already under the ( ListSettings -->  In bottom of the page we have 'Views' under the views we have 'All Items' click the All Items  ) ] . Now I have two items in my list, One item with attachment file and another item without attachment file. You can see it in below Screen Shot. Now we need to validate ( if the attachment column is empty give an alert at the same time the file should ...
Read more