Uploading Files to SharePoint Site Via React, Django REST API: A Hack

Recently, I was working on a project and the requirement was to upload files to a Microsoft Teams SharePoint Folder. To Upload the file to the SharePoint folder one needs to provide the authentication credentials to get authenticated and be able to gain access to the Site to upload the file. But the hack to achieve the same type of upload, without using the conventional method of passing credentials via REST API to upload, is the idea of syncing the OneDrive with the Teams SharePoint location.

1. Syncing the Teams SharePoint Site with OneDrive:

Teams SharePoint Site can mean like create a repository at the local i.e., The site’s files and folders can be managed via the File Explorer. And any operations or changes performed through the File Explorer are directly reflected in the Teams Site (So, we can upload, delete or make any change to the Site location without really logging opening the SharePoint location). This can be relieving as we don’t have to log into the browser every time.

To sync the site, open the share point site and click on the sync button located
Consider, we have a Team called Share Point File Upload comprising of two channels : 1. General & 2. Uploads. Open the Teams SharePoint site by clicking:
1. ‘…’
2. Click Open in SharePoint
3. Click on the “Sync” in the toolbar.

The Site Folder is Syncing

Here the aim is to uploading a folder to the Upload channel i.e., we sync the upload folder. Here we see in the file Explorer that a directory of the upload channel is synced under the Company Name parent directory as:

Synced folder to the above SharePoint site

Now, Any File uploaded to this Share Point Upload-Uploads Folder will be uploaded to the site folder directly. Now we build an application (React + Django REST) to upload files to the SharePoint site via the “Share Point File Upload — Uploads” Folder.

Setting Up the Django REST Backend:

1. To begin, one needs to create a virtual environment, to create a virtual environment please check this article. Create a folder my-app i.e., it would contain the frontend as well as the django files.
2. After setting up of the virtual environment, we need to install the other dependencies. So, next activate the virtual environment and pip install the following:

pip install django
pip install djangorestframework
pip install django-cors-headers
pip install djangorestframework-bulk

We enable the cors-headers ,as we send request across different ports. We import the djangorestframework-bulk to enable registering of routes for the ViewSets that would be created.

3. We Create the django project by creating a project called backend and a Django app in the project named as fileuploaderapp by using the following:

django-admin startproject backend
python manage.py startapp fileuploaderapp

The Folder structure after the creation of app looks as:

Now we modify the backend/settings.py by including the created app in the project and adding few middleware and other changes as:

In settings.py we map the MEDIA ROOT to another folder in local directory called DocumnetStore the files uploaded also save a copy in this store.

Now, we modify the file fileuploaderapp/views.py by creating a ViewSet for this upload purpose
Here are 3 methods defined:
1. For Uploading :: create
This method is initiated when the user submits the files which are to be uploaded. In this method we provide the sharepoint synced folder where the file is uploaded equivalent to the file uploaded to the actual sharepoint site.
2. Deleting of the Uploaded File as soon as it is Uploaded :: delete
This method handles the deletion of the file from the SharePoint Site. This method is called when the Cancel Icon of the uploaded files is clicked.
3. For Opening the uploaded file in the summary of the Uploads :: list
The FileSystemStorage class is a File storage API that handles the basic file storage at local filesystem. This reads the file contents from the locally created DocumentStore and returns in response, this action is observed by the user as: When the uploaded chips are clicked results in download of the file again.

Now define the end point for our API which would call the methods of the ViewSet defined above based on the method of the API call. The define the end points by registering the defined ViewSet with a corresponding URL and Route Patterns. For this create a file urls.py in the fileuploaderapp folder. I have named the route string to be as ‘upload’, which would be a part of the API endpoint. The created fileuploaderapp/urls.py, where we define the endpoints pattern of the viewset defined, looks as :

I register the app ( fileuploaderapp) url routes in the urls.py of the project folder ( backend\urls.py ). Open the backend\urls.py and make changes, so that finally it looks as:

Now, we run the django server by Navigating to the backend folder and running:

python manage.py runserver

At http://127.0.0.1:8000/ can see the django server running.

Setting Up the React Front-End:

To begin with the set up of the React app. Run the following commands:

npx create-react-app my-app
cd my-app
npm start

In this project have majorly use the React Material UI components to build the UI elements. Browse for localhost:8000, The start page looks like the left image, ‘
Then Create a component called FileUploader.js in the component folder
The Folder structure of the React App looks like the one on right.

Now, install the npm packages that would be required to build the application such as axios, material-ui/core, js-file-download, material-ui/icons, material-ui-dropzone (I have mentioned nearly all of the modules, but while running the code if you find any module not found error kindly npm install it if I mistakenly have missed any).

In the Created FileUploader Component I use the DropzoneDialog from material-ui-dropzone and the file would look like:

Now, Include this component in the App.js of the project folder. Then the App.js File looks like as:

Now after this, Lets start the React app by the command npm start and browse to React App and find your application successfully running. Now, we see that the by clicking the upload button we can

1. Upload files
2. Also, Can delete them as soon as we upload them
3. Open the uploaded files.

The Working of the App can be witnessed as:

Note: I haven’t exposed my File Explorer while recording the video. But once the user clicks on the upload button, The File Explorer Opens Automatically to select the Files for upload:

Uploading Files From the File Explorer(The File explorer wasn’t recorded to maintain the privacy of other files but on click of button the explorer opens)

The Files Uploaded (111.png,12.png) are uploaded to the Teams Folder:

The Uploaded Files found in the Teams Folder

When we open this in SharePoint online browser it appears as:

Files Uploaded to the SharePoint Cloud

This method is a Hack to the conventional method of upload files to the SharePoint Site. Hope this article might help the one looking for this kind of a requirement.

Note: Here I have used the example of a Teams SharePoint Folder. But this method of syncing the folder to the Online Site Location can be adopted to any Online File storage system if it can be mapped to a synced drive locally.

To directly clone the App from the GitHub, can visit my repository:
MY GITHUB REPOSITORY

Thank You to the readers for being patient enough to read this article. Umm…..The Article turned out to be a lengthy one… but I hope you like it!

All the best to the reader for their Future Endeavours!!
Dont forget to…Learn!..Smile!..Grow! Repeat!