Solution for Dropbox API where I have a non-standard setup.

chainsbomb · ‎11-10-2023

My app is single-page server-side javascript/HTML, but I don't use Node. This seems to mean that I can't just import {Dropbox} from 'dropbox'

I am able to access use the chooser and saver by using dropbox via script i.e. src="https://www.dropbox.com/static/api/2/dropins.js", but the functionality available to https://www.dropbox.com/static/api/2/dropins.js is limited. I need to be able to overwrite files with updated data without the user being required to manage files all the time.

The examples I see in Github seem to require libraries I can't find or are only available to those using Node or python.

I need my users to be able to save JSON data as a file on Dropbox, then be able to retrieve that data, converted back into JSON. The chooser and saver, while functional, are too much of a hassle for my users to constantly update. It's not a complicated plan, but access to the correct libraries and formats is a bit frustrating.

Any solutions for a purely no-frills javascript/HTML app?

Здравко · ‎11-10-2023

@chainsbomb wrote:
My app is single-page server-side javascript/HTML, but I don't use Node. ...

Hi @chainsbomb,

It's not mandatory to use any library or so to access Dropbox API, in spite I cannot imagine what's such an environment that cannot use anything similar. Anyway, the only mandatory thing is ability to perform outgoing HTTPS POST requests to dedicated Dropbox servers. If by any chance this is impossible, then you're not able to perform API calls, otherwise just construct the calls yourself as described in documentation. A bit more hard typing work but that's it. The libraries you're talking about (most probably Dropbox SDK) just make this excessive typing smaller - every such a HTTP request is represented with corresponding method (you can make something similar yourself).

Good luck.

chainsbomb · ‎11-11-2023

That is the real issue. Without SDK capabilities, it's a bit more work. Thank you, Здравко, for your insight.

Greg-DB · ‎11-13-2023

@chainsbomb As Здравко said, it's not necessary to use an SDK to access the Dropbox API, as you can construct the network requests directly.

It is worth nothing though that the official Dropbox API v2 JavaScript SDK supports both back-end Node and front-end browser JavaScript environments. So, you can use a <script> tag to import the Dropbox API v2 JavaScript SDK into browser JavaScript, from a CDN of your choice. Dropbox doesn't require or endorse any particular CDN, but for example, the Dropbox API v2 JavaScript SDK is available on cdnjs.

chainsbomb · ‎11-14-2023

From what I gather, the Dropbox API v2 JavaScript SDK requires node.js to be installed, which I do not have.

Anything via "import" or "require" or "curl" are out of bounds, so I guess GET and POST are the solution.

Thanks though.

djschoch

chainsbomb,

Sounds like I'm in a similar situation as you - I need to just use GET and POST to retrieve and save files on Dropbox. Would you be willing to share a few code snippets and/or advice to get me started? Thanks so much.

-Dan-

djschoch

Hi Greg-DB,

Can you provide a simple example of what I need to do in my JavaScript to use the Dropbox SDK using a CDN? I have the script statement in my HTML header, but I don't know how to access it in my JS. One example I found using the "import" statement, but apparently that doesn't work unless I have the SDK installed in my project. Your help is greatly appreciated!

-Dan-

Здравко

Hi @djschoch,

Take a look here for instance. You may use import, but it's not something mandatory. 😉

Hope this helps.

Greg-DB

@djschoch The script tag in the examples load the SDK from a local copy, but if you want to use the Dropbox JavaScript SDK in browser JavaScript and load it from a CDN, you should be able to do so like this, and access the 'Dropbox' object:

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.34.0/Dropbox-sdk.min.js"></script>
		<script type="text/javascript">
			console.log(Dropbox);
		</script>
	</head>

	<body>

	</body>

</html>

Here I've just logged the object as a way to check it is available. As long as that is loaded successfully, you should then be able to use that 'Dropbox' object like in the examples here, for instance.

djschoch

Greg-DB,

Thank you SO MUCH for your help. This is exactly the jumpstart I needed. I fumbled a bit, but I now have a basic call working successfully. Your help is very much appreciated.

One last question (this is probably in the documentation somewhere; I apologize for being lazy at the moment): Can you show how to get a current access token, based on my appKey (and appSecret?)? Also, how long is the access token valid?

THANKS again,

-Dan-

Solution for Dropbox API where I have a non-standard setup.

Solution for Dropbox API where I have a non-standard setup.

Top contributors to this post