Matt Hughes tinkerer, grower, craftsman

Exporting a file from iOS with Ionic Framework

I've been working on a different sort of project lately, using Ionic Framework to build an iPad app for an upcoming conference. Among other things, this app will collect contact info from potential clients at the conference.

You would think that writing a few fields to CSV and exporting it to another machine would be easy. Ionic and Cordova made it pretty simple simple... It was a breeze when testing on an Android VM! Unfortunately, iOS made it needlessly difficult and unintuitive.

In a nutshell, Android and iOS have different attitudes on sharing files between apps. The $cordovaFile plugin documentation shows how Android allows non-private directories for apps to store their files, where iOS does not: http://ngcordova.com/docs/plugins/file/.

This meant that I could write a CSV file to cordova.file.externalDataDirectory on Android, open the file with $cordovaFileOpener2, and it would be opened right in Excel. On iOS all of the cordova.file directories are private, which means $cordovaFileOpener2 cannot open any files in the app's private directory.

My nemesis: UIFileSharingEnabled

Ionic has several config.xml settings that automatically translate to the appropriate Android or iOS config values. DisallowOverscroll, Fullscreen, and Orientation are just a few examples. The full list can be found at https://cordova.apache.org/docs/en/latest/config_ref/. Unfortunately, iOS file sharing is not an Ionic config setting.

After some research, I found out that iOS requires the UIFileSharingEnabled value to be set to true in the app's Info.plist file. This is the "Application supports iTunes file sharing" setting in XCode. Yes, you read that right... The Apple Way™ requires you to use iTunes to download app files off your device. It doesn't make much sense to me, either.

Most threads I could find online about adding plist entries used a Cordova hook developed by Marco Carnazzo: https://gist.github.com/marcocarnazzo/6f01a57d390e8fe3071f. This hook allows you to add tags to the Ionic config.xml, and have them transformed to the appropriate Android or iOS config values. I ran into some errors while using the script, and couldn't make it work for me. Since I only needed iOS-specific config values written, I decided to take a less dynamic, low-tech approach.

PlistBuddy to the rescue

I came across the PlistBuddy utility from this StackOverflow thread: http://stackoverflow.com/a/31845828/152133. I ran into trouble with this hook as written, but I was able to modify it to suit my needs. I saved the following code in hooks/after_prepare/020_add_tags_to_plist.sh:

#!/bin/bash

PLIST=platforms/ios/*/*-Info.plist
/usr/libexec/PlistBuddy -c "Add :UIFileSharingEnabled bool YES" $PLIST

true

after_prepare Cordova hook

Retrieving your files in iTunes

First, click the device button in iTunes.

iTunes with iPad connected

Next select the Apps menu item, and scroll down to File Sharing.

iPad Apps screen in iTunes

Select your app, and download the files you need!

iPad file sharing in iTunes