React SPFx - Adding files to SharePoint list field using PnPjs

问题

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 and returns back the item which should have had the attachments from the code below. 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/

回答1:

You have to create the item, and then add an attachment to it.

You can add an attachment to a list item using the add method. This method takes either a string, Blob, or ArrayBuffer. pnp documentation

onDrop = (acceptedFiles) => {
    acceptedFiles.forEach(file => {

        const reader = new FileReader()

        reader.onabort = () => console.log('file reading was aborted')
        reader.onerror = () => console.log('file reading has failed')
        reader.onload = async () => {
            // get file content
            const binaryStr = reader.result

            // assume we have itemId
            let itemId = 1;
            let request = await sp.web.lists.getByTitle("Requests").items.getById(itemId)();
            await request.attachmentFiles.add("file2.txt", "Here is my content");
        }
        reader.readAsArrayBuffer(file)
    })



}

来源：https://stackoverflow.com/questions/62202602/react-spfx-adding-files-to-sharepoint-list-field-using-pnpjs

标签

javascript

reactjs

typescript

web-applications

spfx