Take Image From User and Store in List, Then Retrieve From List SPFX

Question

I want to take an Image from user then store in List using the sp PNP API, then retrieve from the list and display to user by using the get API call from sp PNP

Tuhin Paul · Answer

The SharePoint Framework (SPFx) is a development model for building SharePoint solutions that focuses on client-side development using modern web technologies such as React, TypeScript, and Node.js. In order to interact with SharePoint from a client-side solution, developers typically use SharePoint's REST API or a library that simplifies the process of working with the API. One such library is the PnP JS library, which is a collection of JavaScript functions and helpers that make it easier to interact with SharePoint from client-side solutions. The library provides a number of helper functions for common tasks, such as working with lists and libraries, managing site permissions, and working with user profiles. To use the PnP JS library, you must first authenticate with SharePoint. There are several ways to authenticate with SharePoint, including using OAuth or Azure Active Directory. The specific method you use will depend on the requirements of your solution and the resources available to you. Once you've authenticated with SharePoint, you can use the PnP JS library to interact with SharePoint lists. In the code snippets provided in the previous answer, we're using the library to add an image to a SharePoint list and then retrieve that image and display it to the user.

Tuhin Paul · Answer

Part 2 And below is the code to retrieve the image from the SharePoint list and display it to the user: import { sp } from "@pnp/sp"; // Get the image element from the DOM const image = document.querySelector("#image"); // Retrieve the image from the SharePoint list const list = sp.web.lists.getByTitle("ImageList"); const items = await list.items.select("Image").get(); const item = items[0]; // Set the source of the image element to the URL of the image image.src = item.Image.Url;

Tuhin Paul · Answer

Part 1 First create a SharePoint list with a column of type 'Image' to store the images. Next use the PnP JS library to upload the image to the SharePoint list. and then use the PnP JS library to retrieve the image from the SharePoint list and display it to the user. See the code to upload an image on sharepoint list: import { sp } from "@pnp/sp"; // Get the file input element from the DOM const fileInput = document.querySelector("#file-input"); // Add an event listener to the file input element to get the file object fileInput.addEventListener("change", async () => { // Get the file object const file = fileInput.files[0]; // Upload the file to the SharePoint list const list = sp.web.lists.getByTitle("ImageList"); const item = await list.items.add({ Title: file.name, Image: { Name: file.name, ContentStream: file, }, }); });

Take Image From User and Store in List, Then Retrieve From List SPFX

Answers (3)