Dropbox file chooser integration

I'm curious if anyone (else) has successfully implemented a Dropbox Chooser from within a Retool app for seamless file-link-fetching into a text input component.

I've managed to accomplish this (with some sweat, trial & error, and scotch tape), and have a draft "How-To" nearly ready to go – buuut it's kind of a beast, and I'm somewhat hesitant to share it :grimacing:. I was surprised to not find any (closely) related forum threads; I was expecting it to be a somewhat common functionality that Retool users would want. That's why I'm curious if anyone else has done the same/similar before subjecting the forum to my version of it, and/or is there interest for this?

Hi @Schteevynn , can you share how you get Dropbox Chooser implement please? I am building an internal tool for my team, and we need to search our DB for images.
Thanks!

Sure @Jagerbom, I'm happy to share. I wrote this up a couple months ago:

Here's an example of the Dropbox chooser popup after clicking one of the buttons shown above:

After you find and select the desired file and click Choose, the popup closes and the URL populates itself into the text input. Nice! But how?

This solution combines the Retool Custom Component and the Dropbox Chooser. I suggest reading through both!

I certainly don't claim the following to be comprehensive – this entailed a few hours of experimentation, and there are lot of variables involved (not to mention personal preferences) – but I hope it's enough to convey the gist of it.

The Dropbox Chooser docs refer to an "app key" – ultimately, you'll need an app key generated from the organization that will be browsing its own Dropbox files. That may be the same as your dropbox account if you are part of that org's dropbox account, or not (e.g. if you're a freelancer). Something to keep in mind.

A few notes for when you're in the "Create a Dropbox app" page on Dropbox:

You also don't want "multiselect" enabled for your Chooser, since you're only grabbing one URL. You probably also want Preview links rather than Direct links, as the latter expire after a few hours.

In your Retool app:

  1. Add a text input field and a custom component to your app. Give 'em good names.

  2. Set the custom component's Model to { "dropboxURL": null }.

  3. For the first dropbox button example shown above (the wide, default "Choose from Dropbox" button), replace the custom component's iFrame code with the following (update yourAppKeyGoesHere with your app key):

<style>
  body { margin: 0; }
</style>

<script type="text/javascript" 
  src="https://www.dropbox.com/static/api/2/dropins.js" 
  id="dropboxjs" 
  data-app-key="yourAppKeyGoesHere">
</script>

<script>

var options = { 
  success: function(files) {
        window.Retool.modelUpdate({ dropboxURL: files[0].link })
    },
  multiselect: false
};
var button = Dropbox.createChooseButton(options);
document.getElementById("dropbox").appendChild(button);

</script>

<div id="dropbox"></div>

I wanted a more compact solution (second button example shown above), so I used this as the iFrame code (again, note the yourAppKeyGoesHere):

<style>
  body { margin: 0; display: flex; align-items: center; }
  img:hover { background: #ffffff; }
</style>

<script type="text/javascript"
  src="https://www.dropbox.com/static/api/2/dropins.js"
  id="dropboxjs"
  data-app-key="yourAppKeyGoesHere">
</script>

<script>
var options = { 
  success: function(files) {
        window.Retool.modelUpdate({ dropboxURL: files[0].link })
    },
  multiselect: false
};
</script>

<img src="https://cfl.dropboxstatic.com/static/images/logo_catalog/dropbox_logo_glyph_m1.svg" style="height: 1.1em;" onClick="Dropbox.choose(options)" />

For either approach, toggle on the custom component's "Allow popups to escape sandbox" and "Allow same origin."

  1. Set the text input's default value to be the custom component's model value (this will pop the URL into the text field as soon as the custom component's model is updated by the Chooser):

Screen Shot 2022-04-25 at 12.51.25 PM

This should result in a functioning Dropbox Chooser -> text input field implementation.

The Catch

After some successful use, we noticed that the dropboxURL value in the custom component's Model can hang around and cause some unexpected behavior if the text input field is part of a form that is linked to a table that has a "select row to edit" functionality. Basically, the form is trying to default a value into the text input from the table's selected row while the text input is simultaneously trying to default in a lingering value from the custom component's Model.

The solution for this was two-pronged. First, routinely null the Model's value any time the table's selection is changed or cleared (this seems to cover the scenarios when you want to dump that value, YMMV); second, when there is a value in the custom component's model (i.e. you have just chosen a new URL from the Chooser), break the link between any existing value in the table's selected row and the text input, thus allowing the just-picked new URL to overwrite the existing value from the table:

Table component:

Text input component:

Screen Shot 2022-04-25 at 3.09.40 PM


The above is working well for our specific use cases – I hope it is helpful for you!

1 Like

I really appreciate your effort for writing such a detailed instruction, as well as your willingness to share your knowledge.
I am new to Retool and this is an important tool for my team, this could save us so much time and effort.
If I found anything that I could improve, I would let you know as well.

1 Like