I am developing an html file for our group to do weekly picks online. I have to program working where the users can pick their own games. However I need a place to store and retrieve the information selected so other users can view current picks. I want to use Dropbox as my online repository. Through my internet searches, I created an app in Dropbox and made it available to anyone with the link. However when I try to implement a function to upload the file I get the following error :

Here is what the html looks like. The save button for each line will become active once there are valid picks for all games. At this point the file (in this case an array with selected picks) should be uploaded to the dropbox api. Other users (7) will need to be able to upload and download files (only done by javascript code) to upload and download the most current selection information.

Here is the api that I have created :

app Key
App Secret

Here is the function I am trying to use to do this :
async function saveFileToDropBox() {
const dbx = new Dropbox.Dropbox({ accessToken: '' });
var text_array = JSON.stringify(users_array)
var file = new File([text_array], "users_array.json", { type: "application/json" });
var dropbox_path_file = '/2025/users_array.json';
try {
const response = await dbx.filesUpload({
path: dropbox_path_file, // Desired path and filename in Dropbox
contents : file ,
mode: { '.tag': 'overwrite' } // Optional: Overwrite if file exists
});
console.log('File uploaded successfully:', response);
} catch (error) {
console.error('Error uploading file:', error);
}
}
It seems like my problem is with the dropbox authorization. I generated the access token from the app settings page. Am I missing something in the authorization process. Any code updates would be greatly appreciated. Thank you in advance.