How to upload image to image column from SharePoint List using REST API(React)

Question

I have a problem of uploading image to image column in sharepoint online via pnpjs I don't know how to convert image and upload to image column in sharepoint list. I tried lot of ways (by convert image to blob, filedata) nothing works.

Keep in much this is not an attachments for the list.. It's a new column(image) in sharepoint list reference image click here

score 2 · Answer 1 · answered Feb 17 '21 at 07:43

@azarmfa,

The image file in fact did not store in the image field. The field just references its location. You could first upload the image file to a library (by default it will be site asset), then update the item like below:

  let list = sp.web.lists.getByTitle("mylinks");

  let json = {
    "fileName": "Search_Arrow.jpg",
    "serverUrl": "https://abc.sharepoint.com",
    "serverRelativeUrl": "/sites/s01/Style%20Library/Images/Search_Arrow.jpg"
  };

  let jsonstr = JSON.stringify(json);

  const i = await list.items.getById(3).update({
    Title: "My New Tit",
    img: jsonstr
  });

BR

score 1 · Answer 2 · answered Feb 15 '21 at 00:31

Looks like the image is not stored in the list. JSON is stored. So you can just upload image to site assets (that's what sharepoint does when you set the image manually) and then put the json to the field. I would try something like this (assuming you are using pnpjs)

import * as React from "react";
import { sp } from "@pnp/sp/presets/all";

// hello world react component
export const HelloWorld = () => {

  const uploadFile = async (evt) => {

    const file: File = evt.target.files[0];

    // upload to the root folder of site assets in this demo
    const assets = await sp.web.lists.ensureSiteAssetsLibrary();
    const fileItem = await assets.rootFolder.files.add(file.name, file, true);

    // bare minimum; probably you'll want other properties as well
    const img = {
      "serverRelativeUrl": fileItem.data.ServerRelativeUrl,
    };

    // create the item, stringify json for image column
    await sp.web.lists.getByTitle("YourListWithImageColumn").items.add({
      Title: "Hello",
      YourImageColumn: JSON.stringify(img)
    });
  };

  return (<div>
    <input type='file' onChange={uploadFile} />
  </div>);
};

How to upload image to image column from SharePoint List using REST API(React)

2 Answers2