SPFx React Webpart - Using PnPJs to add files to list field

Question

I'm building an application using SPFx Webpart with React. On one of my components I have a form that the user can fill out. I'm using PnPjs to push the user's responses into my list field. Everything works as expected.

I was looking at how to add a file or attachment field type to a list. I saw I can do it in the powerapps. So now in my "Product" list I have a field called attachments. When I attach files to that field from SharePoint's backend and then make a call to the list using PnPjs the attachment field does not return information about the files. But rather a boolean with a true or false.

pnp.sp.web.lists.getByTitle("Products").items.filter("Id eq '" + this.props.match.params.id + "'").top(1).get().then((items: any[]) => {
    console.log(items); 
}

So this works perfect. Now in my items console I get back Attachments: true or Attachments: false

I'm using react-dropzone to allow users to upload files. Using PnPjs how do I upload the files to that item?

Here is how I'm creating the item:

pnp.sp.web.lists.getByTitle("Requests").items.add({
    Title: this.state.SuggestedVendor,
    Client_x0020_Email: this.state.getEmail,
    Created: this.state.startDate,
    Attachments: //need help here
}

Here is my code for the dropdown files:

onDrop = (acceptedFiles) => {
   console.log(acceptedFiles);
   //Assuming this is where I do the logic
}

<Dropzone 
    onDrop={this.onDrop}
    multiple
    >
    {({getRootProps, getInputProps, isDragActive}) => (
        <div {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? "Drop it like it's hot!" : 'Click me or drag a file to upload!'}
        </div>
    )}
</Dropzone>

And here is the response I get back from console.log(acceptedFiles);:

[File]
0: File {path: "John-Hancock-signature.png", name: "John-Hancock-signature.png", lastModified: 1590783703732, lastModifiedDate: Fri May 29 2020 13:21:43 GMT-0700 (Pacific Daylight Time), webkitRelativePath: "", …}
length: 1

I found this documentation here on how to push the files : https://pnp.github.io/pnpjs/sp/files/

Answer 1

Sample test script for your reference.

onDrop = (acceptedFiles) => {
    //console.log(acceptedFiles);
    //just one file
    let file=acceptedFiles[0];
    sp.web.lists.getByTitle("TestList").items.add({
      Title: "Upload Attachement"
    }).then(r => {
      // this will add an attachment to the item we just created to push t sharepoint list
      r.item.attachmentFiles.add(file.name, file).then(result => {
        console.log(result);
      })
    })
  }

You could check the guideline here also.