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[]) => {

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:

    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) => {
   //Assuming this is where I do the logic

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

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

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/

1 Answer 1


Sample test script for your reference.

onDrop = (acceptedFiles) => {
    //just one file
    let file=acceptedFiles[0];
      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 => {

You could check the guideline here also.

  • wow! thanks for your help. So this did in fact push the file name to a new item list. So this file upload field is part of the form. So I don't want to use the .add here I want to make this push in the .add function in my original post. Can you help me with that? is this what i use? await item.attachmentFiles.add("file2.txt", "Here is my content");
    – hisusu32
    Jun 5, 2020 at 23:53
  • Because with the current code it just adds the name of whatever the file was.. it doesn't actually store it in the request or SharePoint
    – hisusu32
    Jun 5, 2020 at 23:55

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.