Nathan Grigg

Uploading an Image with Workflow and Flask

Workflow is an iOS app that lets you build a simple program by dragging blocks around, similar to Apple’s Automator app that ships with macOS. A recent update makes it possible to send a wider variety of HTTP requests, which allows you to interact with web APIs that aren’t otherwise supported.

Or, if you have a web server, write your own API.

Upload images workflow

Here is a workflow to take images from my phone and upload them to my server. It makes one request per image. It sets the custom header Grigg-Authentication to make sure that random people aren’t uploading images. It puts a file into the POST request with field name image. The responses will be HTML image tags, which are collected and then copied to the clipboard.

Flask

Flask is a Python web framework. It makes it very easy to map URLs to Python functions.

The first thing I wrote was a private decorator, that would check the HTTP headers for my authentication key. It doesn’t have to be a decorator, but that makes it easier to reuse in the future.

1 KEY = 'password1!'
2 
3 def private(f):
4     @functools.wraps(f)
5     def wrapper(*args, **kwargs):
6         if flask.request.headers.get('Grigg-Authenticate') != KEY:
7             flask.abort(403)
8         return f(*args, **kwargs)
9     return wrapper

If you are not using a secure (HTTPS) connection, somebody could read your authentication key and pretend to be you. You can set this up directly with Flask, but since I’m already running nginx, I used that. (I will share the details in a future post.)

Next, there is some basic Flask setup. I changed the response MIME type to plain text and registered an error handler that will report any exceptions in the response, rather than logging an error where I won’t see it.

 1 app = flask.Flask(__name__)
 2 
 3 class TextResponse(flask.Response):
 4     default_mimetype = 'text/plain'
 5 
 6 app.response_class = TextResponse
 7 
 8 @app.errorhandler(Exception)
 9 def handle_generic_exception(e):
10     return 'Unhandled exception: {!r}\n'.format(e)

Then, there is the routing code. This function is called every time someone visits /blog/upload-image, as specified in the route decorator.

 1 @app.route('/blog/upload-image', methods=['POST'])
 2 @private
 3 def blog_upload_image():
 4     try:
 5         fh = flask.request.files['image']
 6     except KeyError:
 7         flask.abort(400, 'Expected a file with key "image", not found')
 8 
 9     _, extension = os.path.splitext(fh.filename)
10     filename = upload_image(fh, extension)
11     return '<img src="{}" class="centered">\n'.format(filename)

Finally, the actual work is done by the upload_image function. I save the image into a dated directory with a random filename, then run a bunch of git commands.

 1 class Error(Exception):
 2     pass
 3 
 4 def random_chars(size):
 5     return base64.b32encode(
 6             uuid.uuid4().bytes).decode('ascii').lower().rstrip('=')[:size]
 7 
 8 def upload_image(fh, extension):
 9     """Upload image to blog and return filename, relative to site root."""
10     subdir = 'images/{:%Y}'.format(datetime.datetime.today())
11     try:
12         os.mkdir(os.path.join(PATH, subdir))
13     except FileExistsError:
14         pass
15 
16     basename = ''.join((random_chars(8), extension))
17     filename = os.path.join(subdir, basename)
18     fh.save(os.path.join(PATH, filename))
19 
20     output = []
21     def run(args):
22         output.append(' '.join(args))
23         output.append(subprocess.check_output(
24             args, cwd=PATH, stderr=subprocess.STDOUT))
25     try:
26         run(['git', 'pull', '--ff-only'])
27         run(['git', 'add', filename])
28         run(['git', 'commit', '-m', 'Add image'])
29         run(['git', 'push'])
30     except subprocess.CalledProcessError:
31         raise Error('Git operation failed. Output:\n{}'.format(
32             '\n'.join(output)))
33 
34     return filename