0

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.

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.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.