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 li

Solution 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 = newFileReader()

        reader.onabort = () =>console.log('file reading was aborted')
        reader.onerror = () =>console.log('file reading has failed')
        reader.onload = async () => {
            // get file contentconst binaryStr = reader.result// assume we have itemIdlet 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)
    })



}