Using Automator and Dropbox to Automate Photo Import

Someone in the Tap Forms forum recently asked, if it is possible to automatically import an image from a folder using Automator into a new Tap Forms record.
Since I was thinking about a similar application, I further investigated this. Currently, the Javascript API doesn’t support file system access, but adding an image from a webservice is possible. With Dropbox, a cloud file hosting service, I can create shareable URLs. So I thought that should be a way to get this done. And in the end, it worked!

Create Dropbox API Key

In order to upload a file to our Dropbox on the server, you need an API key for authentication. This way, Dropbox knows that you are a legitimate user. The process is simple and starts over at https://www.dropbox.com/developers/apps/create.

Oh, if you are not a Dropbox user, you can open a free account using my referrer link.

When you open https://www.dropbox.com/developers/apps/create, select ‘Dropbox API’, and fill the next few fields according to the figure below. Select a name for your ‘App’ that makes sense to you!

Once you click on ‘Create App’, you can generate the access token:

Select ‘Generate’ to receive your token:

You will need this token later for the Automator action.

Next, select the name for the shared folder inside your Dropbox folder. I used the same one I used for the app. Don’t share the API token with anybody since it is a gateway to access this shared Dropbox folder.

Tap Forms Form Script

For this example, I use a form script that creates a new record, then stores the filename in the record title field and adds the image from the given URL:

var photo_id = 'fld-xxx';
var title_id = 'fld-xxx';

let url = parameters['url'];
let filename = parameters['file'];

// add 'raw' argument for dropbox link 
url = url.split('?')[0]
url = url + '?raw=1';

console.log("Adding record for "+filename+" with image " + url);

let record = form.addNewRecord();
record.addPhotoFromUrlToField(url, photo_id);
record.setFieldValue(title_id, filename.split('.')[0]);

form.saveAllChanges();

My script expects that your form has two fields, a photo field (type photo) and a title field (type text). You need to set the photo_id and title_id values accordingly.

In order to call this script from the Automator action, we need the script URL:

Clicking on the link icon in Tap Form’s script editor copies the script URL to the clipboard. The script URL looks something like this

tapformz://script/db-xxx/frm-xxx/script_name

This can be used to call your Tap Forms script from the terminal using the ‘open’ command:

open tapformz://script/db-xxx/frm-xxx/script_name?url=photo.jpg&name=photo

This is what we’ll be using in the Automator script. More infos on the script URL is available in the Tap Forms Javascript API documentation.

Automator Script

This is the first time I created an automator action and I was surprised how easy it was and how many options there are. Definitely something I have to keep in mind for further exploration.

After opening Automator, select a new task (cmd-N or File > New). Next you want to choose ‘Folder Action’:

The action to perform is ‘Run Shell Script’. The easiest way to find the action template is using the search bar. Once you found the action, double click on it or drag and drop it to the right:

Important settings:

  • Select the folder (Action Folder) upon which the action should be performed. I called it tfPhotoImport and placed it on my Desktop
  • Select Pass input ‘as arguments’
  • Replace the template code with my Automator bash script

Automator bash script:

# Upload file to dropbox and then call Tap Forms script with link and filename

URLSCRIPT="tapformz://script/db-xxx/frm-xxx/tapformz%20xxxx"
DROPBOX_TOKEN="replace with dropbox app token"
FILE=$1
FILENAME=$(basename "$FILE")

# Upload file to Dropbox
UPLOAD=`curl -sX POST https://content.dropboxapi.com/2/files/upload \
--header "Authorization: Bearer $DROPBOX_TOKEN" \
--header "Dropbox-API-Arg: {\"path\": \"/$FILENAME\",\"mode\": \"add\",\"autorename\": true,\"mute\": false}" \
--header "Content-Type: application/octet-stream" \
--data-binary @"$FILE"`

# Get shared url
JSON=`curl -s -X POST https://api.dropboxapi.com/2/sharing/create_shared_link_with_settings \
--header "Authorization: Bearer $DROPBOX_TOKEN" \
--header "Content-Type: application/json" \
--data "{\"path\": \"/$FILENAME\",\"settings\": {\"requested_visibility\": \"public\"}}"`

# Cleanup data and call tapformz script
URL=`echo $JSON|php -r 'echo json_decode(fgets(STDIN))->url;'`
FILENAME=`echo $FILENAME|php -r 'echo urlencode(fgets(STDIN));'`
open "$URLSCRIPT?url=$URL&file=$FILENAME"

There are two things that you need to adjust in this script:

  • Replace the tapformz URL link with the one that you created in the first paragraph
  • Add your Dropbox token from the second paragraph

Now everything is ready for you to use. Once you drop an image in your Action Folder, Automator will upload this to your Dropbox cloud account, capture the image URL and launch your Tap Forms script with the image URL as parameter. Next, Tap Forms will create a new record, set the title as file name and attach the image to it. That’s it!

This is really powerful what a few lines of code can do!

If you want to delete the image from your action folder you can add

rm $FILE

at the end of your Automator script. Once in a while, I would visit your shared Dropbox folder (~/Dropbox/App/your_shared_dropbox_folder) and delete all the files in there too.

Have fun!


Did you like this post? Did you use the given code? Please consider supporting me by buying me a coffee!

Buy Me A Coffee


Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Consulting

Do you need help designing your web site or getting Backlight working the way you want? Contact me to discuss your idea or project.


Buy me a Coffee

If you like what I share here, please consider buying me a coffee or a print. This helps keeping me motivated to continue posting. Thank you!

Buy Me A Coffee

Categories