Here is the function to upload attachments and items in the SharePoint library through React-js in SPFX.

Used PnP JS library for attachments uploading and items insertion in the SharePoint library.

I have used two api call in my function for attachment with item upload:

 private uploadFileFromControl():Promise<any> {
return new Promise<void>((resolve, reject) => {
//Get the file from File DOM
var files = this._input.files;
var file = files[0];

//Upload a file to the SharePoint Library
var url = this.props.context.pageContext.web.serverRelativeUrl;
var selectedlist = this.props.description

var selectedfolder = this.props.title
if (selectedfolder == undefined) {
  var newurl = url + "/" + selectedlist
else {
  var newurl = url + "/" + selectedlist + "/" + selectedfolder

  .files.add(file.name, file, true,)
  .then((data) => {
    alert("File uploaded sucessfully");

  DocType: 'docType'
  }).then(r => {
  .catch((error) => {

Attachment upload is successful but don't know the way to insert item in the SharePoint library through PnP JS Library.

I am able to insert item in the SharePoint list through 2nd API call but getting an error when inserting in SharePoint library.

  • Are you trying to update the properties/metadata of same file you are uploading in first call? or creating 2nd item in another list/library? Commented Apr 22, 2021 at 13:15
  • Yes i am creating 2nd call to insert item in particular column in SharePoint library, Commented Apr 22, 2021 at 16:46
  • 1
    OK. But, are you trying to add value for column against the same file you uploaded in first call.. (in same document library)? Commented Apr 22, 2021 at 17:02
  • Yes, right i was trying to achieve that only but for now i was to trying to add item in a specific library to check the api call if it is working properly or not Commented Apr 23, 2021 at 0:55

1 Answer 1


If you are trying to upload a file to SharePoint library & update it's item properties, use below code:

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

sp.web.getFolderByServerRelativeUrl(newurl).files.add(file.name, file, true).then(f => {

    f.file.getItem().then(item => {

            Title: "A Title",
            OtherField: "My Other Value"

Source: @pnp/sp/files - Setting Associated Item Values

  • Hi @Abhishek, did you try this? Is it working for you? Commented Apr 27, 2021 at 14:01
  • 1
    Yes @Ganesh , It worked Thanks a lot Commented May 4, 2021 at 4:51
  • 1
    okay sure but i had already upvoted Thanks Commented May 4, 2021 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.