how to insert file in library and insert data from that file in sharepoint online in SPFX react [closed]

Question

how to insert file in library and insert data from that file in sharepoint online in SPFX react

Answer 1

Here is a sample code snippet that demonstrates how to upload a file to a library and insert data from that file in SharePoint Online using SPFX React and File Upload API:

import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/files";

async function uploadFile(file: File, libraryName: string) {
  try {
    const fileUrl = '/${libraryName}/${file.name}';

    // Upload the file to the library
    await sp.web.getFolderByServerRelativeUrl('/${libraryName}').files.add(file.name, file, true);

    // Get the file's content
    const response = await sp.web.getFileByServerRelativeUrl(fileUrl).getBuffer();
    const content = new TextDecoder().decode(response);

    // Insert the file's content in SharePoint using the REST API
    const list = sp.web.lists.getByTitle(libraryName);
    const listItem = await list.items.add({
      Title: file.name,
      Content: content
    });
  } catch (error) {
    console.log(error);
  }
}