How to upload an image and other list items to a SharePoint list using SPFx web part?

Question

I have a SharePoint list called complex form, which has the following columns Title, FirstName, LastName, About, Country, State, Street, City, Zip, Email, Company, Photo, the photo is an image column this is the method I am using to make the post request: no image is uploaded after making the request after inspecting the network tab the photo is shown as this- Photo:{}

  private AddContact = async (event: any) => {
    event.preventDefault();

    const {
      Title,
      FirstName,
      LastName,
      About,
      Country,
      State,
      Street,
      City,
      Zip,
      Email,
      Photo,
      Role,
      Company,
    } = this.state;

    const assests = await sp.web.lists.ensureSiteAssetsLibrary();
    const fileItem = await assests.rootFolder.files.add(
      Photo.name,
      Photo,
      true
    );
    const img = {
      ServerRelativeUrl: fileItem.data.ServerRelativeurl,
    };
    const listName = "ComplexForm";

    try {
      const response: ItemAddResult = await sp.web.lists
        .getByTitle(listName)
        .items.add({
          Title: Title,
          FirstName: FirstName,
          LastName: LastName,
          About: About,
          Country: Country,
          State: State,
          Street: Street,
          City: City,
          Photo: JSON.stringify(img),
          Zip: Zip,
          Email: Email,
          Company: Company,
          Role: Role,
        });

      if (response.data) {
        const result = await response.data;
        console.log("Item created:", result);
        toast.success("Request created");
        this.setState((prevState) => ({
          ...prevState,

          Title: "",
          FirstName: "",
          LastName: "",
          About: "",
          Country: "",
          State: "",
          Street: "",
          City: "",
          Photo: null,
          Zip: "",
          Email: "",
          Company: "",
          Role: "",
          isModalOpen: false,
        }));
      } else {
        console.error("Error missing response data");
        toast.error("Unable to create contact");
      }
    } catch (error) {
      console.error("Error creating item:", error);
    }
  };

Answer 1

I’ve moved the image upload process to after the list item is created. Once the list item is successfully created, the image is then added as an attachment to the newly created list item. This should ensure that the image is correctly associated with the list item. Please try this and let me know if it works for you.

private AddContact = async (event: any) => {
  event.preventDefault();

  const {
    Title,
    FirstName,
    LastName,
    About,
    Country,
    State,
    Street,
    City,
    Zip,
    Email,
    Photo,
    Role,
    Company,
  } = this.state;

  const listName = "ComplexForm";

  try {
    const assests = await sp.web.lists.ensureSiteAssetsLibrary();
    const fileItem = await assests.rootFolder.files.add(
      Photo.name,
      Photo,
      true
    );
    const img = {
      ServerRelativeUrl: fileItem.data.ServerRelativeUrl,
    };

    const response: ItemAddResult = await sp.web.lists
      .getByTitle(listName)
      .items.add({
        Title: Title,
        FirstName: FirstName,
        LastName: LastName,
        About: About,
        Country: Country,
        State: State,
        Street: Street,
        City: City,
        Zip: Zip,
        Email: Email,
        Company: Company,
        Role: Role,
        // Update the Photo column with the URL of the uploaded image
        Photo: img.ServerRelativeUrl,
      });

    if (response.data) {
      const result = await response.data;
      console.log("Item created:", result);
      toast.success("Request created");

      this.setState((prevState) => ({
        ...prevState,

        Title: "",
        FirstName: "",
        LastName: "",
        About: "",
        Country: "",
        State: "",
        Street: "",
        City: "",
        Photo: null,
        Zip: "",
        Email: "",
        Company: "",
        Role: "",
        isModalOpen: false,
      }));
    } else {
      console.error("Error missing response data");
      toast.error("Unable to create contact");
    }
  } catch (error) {
    console.error("Error creating item:", error);
  }
};

Get and show image in SPFx webpart from a Image column in a SP List