Read SharePoint List Item Attachment (image) and Convert Into Base64 String Using CSOM Through App Only Authentication

Sanjay Makwana

6y29.4k4100Article

4 Comments

Join the conversation! Your thoughts help the community grow.

Nash A.6y ago
Hi Sanjay, if we want to display data from different different web application than what approach do you suggest. It is for SP 2016 sites. Source list is in one web application and we want to display the list items in another page of different web application. I used to do it using Visual Web part but trying not to create any farm solution. Appreciate your thoughts.
- Nash A.6y ago
  Using (SPSite site = new SPSite("http://pridevapp01:5915/")) { using (SPWeb web = site.OpenWeb()) { SPList list = web.Lists["LeadershipList_InstanceOnly"]; SPListItemCollection itemCol = list.Items; var Leaders = new List<Leader>(); foreach (SPListItem item in itemCol) { SPFieldUser userField = (SPFieldUser)item.ParentList.Fields.GetFieldByInternalName(LeaderList.Leader); var fieldValue = ((SPFieldUserValue)userField.GetFieldValue((string)item[userField.InternalName])); SPUser user = web.EnsureUser(fieldValue.LookupValue); char[] charSeparators = new char[] { '\\' }; var userId = (user.LoginName).Split(charSeparators)[1]; Leaders.Add(new Leader() { Title = item.Title , userId = userId}); } var ser = new JavaScriptSerializer(); var serialized = ser.Serialize(Leaders); ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "script", "FromCode('" + serialized + "');", true); } }
- Nash A.6y ago
  I could not achieve my requirement using CSOM, so had to resort using my favorite Server site Visual WP. Like yours, I used JavaScript Serializer to convert to JSON and passed it into JavaScript function. I could not use JSONConvert because I was getting this error: Newtonsoft.Json.JsonSerializationException: 'Self referencing loop detected for property 'ListItems' with type 'Microsoft.SharePoint.SPListItemCollection
- Sanjay Makwana6y ago
  You can connect the list which is in your source web application by following steps:You can connect the list which is in your source web application by following steps:1) Open spfarm object using SharePoint database connection2) Get all SPWebServiceCollection using above spfarm object 3) It will give all SPWebServices, from this collecion get all the web services except Administration 4) From this web service we can get webapplication collection object by using webservice.WebApplications 5) Now from this web application collection, we can loop this collection and get single web application using WebApplication.Sites 6) Now we can get the our required source list from this site collection

Introduction

According to one of our requirements, there was a public-facing site developed in .NET core and retrieving data from a SharePoint list. To authenticate it with SharePoint, we were using SharePoint App only authentication. So, for one feature we need to get SharePoint list item attachment (which will always be image file) and display it on a .NET core site.

Problem Statement

We cannot directly add a URL SharePoint list item attachment in the src attribute of the img tag. This is because a .NET application cannot be authenticated directly with SharePoint.

Solution

We have created a web API which will return base64 string of image attached with a SharePoint list item and we will use this base64 string to display an image on a public-facing site developed in .NET core.

Note

.NET core is still not supported in the CSOM library, so we have created a web API solution to interact with SharePoint list items.

Step 1

Create web API which will authenticate with SharePoint through app-only authentication and fetch list item attachment.

Then convert this attachment in base64 string and return this base64 string with JSON format.

Below is code for the web API:

[HttpGet]
[Route("GetProjects")]
public JsonResult Get()
{
string clientID = "**************";
string clientSecret = "*********************";
string siteUrl = "https://********.sharepoint.com/sites/*****";
JsonResult jsRes = new JsonResult();
ListItemCollection items;
List<projectsData> Data = new List<projectsData>();
using (var clientContext = new AuthenticationManager().GetAppOnlyAuthenticatedContext(siteUrl, clientID, clientSecret))
{
List projectsList = clientContext.Web.Lists.GetByTitle("Projects");
CamlQuery query = CamlQuery.CreateAllItemsQuery(100);
items = projectsList.GetItems(query);
clientContext.Load(items);
clientContext.ExecuteQuery();
projectsData project = new projectsData();
foreach (ListItem listItem in items)
{
project = new projectsData();
project.ProjectTitle = Convert.ToString(listItem["Title"]);
project.ProjectID = listItem.Id;
//Get list attachments
AttachmentCollection oAttachments = listItem.AttachmentFiles;
clientContext.Load(oAttachments);
clientContext.ExecuteQuery();
string imgBase64Str = "";
if (oAttachments.Count > 0)
{
Attachment oAttachment = oAttachments[0];
var file = clientContext.Web.GetFileByServerRelativeUrl(oAttachment.ServerRelativeUrl);
clientContext.Load(file);
clientContext.ExecuteQuery();
ClientResult<System.IO.Stream> data = file.OpenBinaryStream();
clientContext.Load(file);
clientContext.ExecuteQuery();
using (System.IO.MemoryStream mStream = new System.IO.MemoryStream())
{
if (data != null)
{
data.Value.CopyTo(mStream);
byte[] imageArray = mStream.ToArray();
imgBase64Str = Convert.ToBase64String(imageArray);
}
}
}
project.imgBase64String = imgBase64Str;
Data.Add(project);
}
};
string result = JsonConvert.SerializeObject(Data);
return jsRes = new JsonResult
{
Data = result
};
}

Here is code of class which we have used in above code snippet,

public class ProjectDetails
{
public string ProjectTitle { get; set; }
public int ProjectID { get; set; }
public string ImgBase64String { get; set; }
}

Step 2

Now we will use this web API in our .NET core solution.

Here is the code snippet for using the web API created in Step 1:

public async Task<IActionResult> HomeAsync()
{
List<ProjectDetails> reservationList = new List<ProjectDetails>();
using (var httpClient = new System.Net.Http.HttpClient())
{
using (var response = await httpClient.GetAsync("https://*********.azurewebsites.net/GetProjects"))
{
string apiResponse = await response.Content.ReadAsStringAsync();
var jsonResult = JObject.Parse(apiResponse);
apiResponse = jsonResult["Data"].ToString();
reservationList = JsonConvert.DeserializeObject<List<ProjectDetails>>(apiResponse);
}
}
return View(reservationList);
}

Here is the model used in the above code snippet.

public class ProjectDetails
{
public string ProjectTitle { get; set; }
public int ProjectID { get; set; }
public string ImgBase64String { get; set; }
}

Step 3

In the above step, we have stored a base64 string in the model. So now, we will use this base64 string to display the image below.

Here is how we will use this base64 string to display an image using an img tag.

<img src="data:image/jpeg;base64,@item.ImgBase64String" alt="Image not available ">

Note

Here in this article, we are targetting an image file as an attachment, but we can use the same code to get the base64 string of other file types.

Hope this article will help you.