Dropbox Integration - seveneightn9ne/pottery-log GitHub Wiki

There is no true SDK for react/expo applications, but it requires some additional work to get it working (not that I have yet).

Package:

Basic Configuration

You need to go to the Dropbox App Console and create an application that the integration will work with. This ultimately should be limited to just an app folder with limited access. When ready it looks like we need to request a production version of this App definition. Once defined, generate an "Access Token" which will need to be included in your Dropbox call in the application. App Console: https://www.dropbox.com/developers/apps?_tk=pilot_lp&_ad=topbar4&_camp=myapps

The basic code to get a list of files in your dropbox account based on the app console definition should be something like the following

    import { Dropbox } from 'dropbox'
    const dbx = new Dropbox({ accessToken: '[ ACCESS TOKEN ](/seveneightn9ne/pottery-log/wiki/-ACCESS-TOKEN-)' });
    dbx.filesListFolder({path: ''})
      .then((response: any) => {
        console.log(response);
     })
     .catch((err: any) => {
       console.log(err);
     });

There are Typescript (and Javascript) examples for basic functionality here - https://github.com/dropbox/dropbox-sdk-js/blob/main/examples/typescript/node/basic.ts

After installing the dropbox package, when I have code attempting to access it I am constantly getting an error that it can't resolve 'crypto' package from dropbox-sdk.min.js even without trying to execute this code.

Failed building JavaScript bundle. Unable to resolve module crypto from D:\Development\ProjectC\PotteryLog\github\pottery-local\pottery-log\node_modules\dropbox\dist\Dropbox-sdk.min.js: crypto could not be found within the project.>

There is various information suggesting newer versions of crypto-js won't work in environments that don't have a native cryptography functionality (including react native) with the later versions of crypto-js (4.0 and above). In this case you are encourage to use package version 3.1.9-1 which was later copied to 3.3.0. The following issue was raised against the SDK for this error, although I haven't yet managed to get what it identifies working. https://github.com/dropbox/dropbox-sdk-js/issues/614

This may also be useful to troubleshoot

Required Functionality for Integration

It is proposed the following should be considered when implementing Dropbox integration (or other cloud storage solutions)

Option to connect the app to dropbox for synchronizing data (by default just upload)
Force synchronization to Dropbox
Manual method to download your pots from Dropbox into your devices app (option to merge or replace with what's on your phone). Later versions may allow you to automatically merge across devices??
[Optional] Only upload if using Wi-Fi?
When adding pots, photos, deleting and updating - sync updates to Dropbox
Maintain a queue of dropbox updates from previous point and attempt to re-run these in the background if it couldn't reach Dropbox (depending on the error?).
Option to see log showing previous calls to Dropbox??
Ideally settings will use native phone accounts for Dropbox (or other)
Primary interface for settings through the Settings interface.

Additional Integration Options

The following is not the expected method for integrating for this app, but may prove useful otherwise https://github.com/tinycreative/react-native-dropbox-chooser

Potential Options

Check for Wifi connection before uploading/downloading from Dropbox.

https://www.npmjs.com/package/react-native-wifi-reborn

https://medium.com/@codingtownindia/react-native-android-wifi-81af0e10d866 (Android specific)

How to create / interact with webpack.config.js

https://docs.expo.io/guides/customizing-webpack/ This is relevant for the Dropbox installation identified in https://github.com/dropbox/dropbox-sdk-js/issues/614