Upload attachment to List Item using React & Axios (REST API)

Question

Well the title pretty much sums it up.

I've got a custom form outside of sharepoint that creates/updates/views items from a sharepoint list using Rest API (with accessToken).

Now i need to be able to also upload a file to those items when creating or updating them (and potentially even download them from outside of sharepoint, if its possible).

I have found several examples using jQuery, but since i'm in React i dont really know how to reproduce it using vanilla JS for React and AXIOS (im using axios since i need compatibility with MS Edge and it seems the most stable so far).

P.S: I'll also need a component for the upload if anyone can recommend a simple one.

Answer 1

Well, i finally did it. I'll post this as an answer since i haven't found any resource online showing how to do it.

I used Filepond-React for my front-end - https://www.npmjs.com/package/react-filepond

And i did it like this ->

const getFileBuffer = (uploadedFiles) => {
    let promised = new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = (e) => {
            resolve(e.target.result)
        }
        reader.onerror = (e) => {
            reject(e.target.error);
        }
        reader.readAsArrayBuffer(uploadedFiles[0]);
    });

    return promised;
}

        axiosApi.post(SiteUrlUpdated, spCreateQuery)
            .then((response) => {
                let item = response.data.d.Id;
                //transform the file
                getFileBuffer(uploadedFiles).then(() => {
                    //upload the file 
                    axiosApi.post(SiteUrl + "(" + item + ")/AttachmentFiles/add(FileName='" + uploadedFiles[0].name + "')", uploadedFiles[0], headerConfig).then((response) => {
                        console.log(uploadedFiles[0]);
                        console.log("Uploaded file");
                        console.log(response);
                    })
                })
            })

Not sure if its the best approach, but it works and it can be easily modified to work for updating/retrieving files.