Attaching Files to a list Item in a SPFx webpart

I think on the most frustrating parts of the development world is the insanely amount of how-to articles written in-which the code isn’t complete and wouldn’t work if it was complete. Also, there are a insane amount of how-to using different technologies that the search giants feel the need to show you. For example, if I put the following query into a search engine, “How to attach a file to a list item using Axios in a SharePoint Webpart,” you would think you would get articles related to Axios, SharePoint, Webparts. However, you will get a mix of “PowerApps,” C# examples, Pages of Ads, etc. Honestly, you can waist a lot of time sorting through the unlimited number pages returned by the search engine. To make things worse, many sites pay to have their content on the first few pages of search results, therefore making much of their content useless.

This is the situation I found myself in yesterday. I waded through 1000’s of pages on this subject only to give up and start old-school hacking out the code based on a few examples written in different languages, using different APIs, etc.

A couple of things you should know when your are reading this code. SPFx builds the webpart using classes, and I haven’t found a way to use the React UseEffect within a class, and I need useEffect to make a few things happen in this webpart. Second I am using the node package “react-dropzone” in this code in order to allow the user to drag and drop files. While I really wanted to use Axios node package because the rest of my code is using Axios for data via the SharePoint Rest API, I broke down and used the “@microsoft/sp-http” node package. I really didn’t want to add in another node package such as pnp-sp controls — Honestly, I don’t care of them anyway. I need access to “this” variable from the webpart class, therefore I am passing it in as xThis.

Finally, this code isn’t complete at the time of written but should help me figure out how to do this in the future.

import { SPHttpClient,
         SPHttpClientResponse,
         ISPHttpClientOptions } from '@microsoft/sp-http';
import   Dropzone from 'react-dropzone'

...

export const AddFileToTask = ({xThis, agendaItemID}): JSX.Element => {
  const onDrop  = (acceptedFiles) => {
    acceptedFiles.map((item, index) => {
      let spHttpClientOptions : ISPHttpClientOptions  = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        body: item
      };

      xThis.props.context.spHttpClient.post(
        restQuery,
        SPHttpClient.configurations.v1,
        spHttpClientOptions).then((response: SPHttpClientResponse) => {
          console.log(`Status code: ${response.status}`);
          console.log(`Status text: ${response.statusText}`);
          if(Number(`${response.status}`) >300)
          {
            alert('Error Uploading file, Try again or contact IT');
          }
          response.json().then((responseJSON: JSON) => {
            console.log(responseJSON);
          });
        }
      );
    });
  };

  return (
    <Dropzone onDrop={onDrop} >
      {({getRootProps, getInputProps}) => (
      <section>
        <div {...getRootProps()}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
      </section>
      )}
    </Dropzone>
  );
};