Microsoft (MS) Flow, Google Voice, and UberGallery: Post images or pictures to a website through text (MMS) message (free)

I have always been intrigued with real time integration of sms/text/mms messages and web applications. What is described in this post is certainly not unique - Flickr offers similar functionality with their Upload by Email functionality and I have seen other services with this feature. However, MS Flow offers additional flexibility in my opinion. For example, your target gallery need not be hosted by Flickr; you can deposit pictures submitted via text/mms to any webserver with FTP(S) or SFTP access.

Furthermore, I was excited to pull together some of my favorite free tools (Google Voice + GMail, Microsoft Flow, shared tenancy webhosting) to produce this flow/process.

Requirements

  • A Google account with Google Voice and GMail configured
  • Microsoft Flow (free account)
  • A web site hosted with a provider that supports SFTP or FTP(S) access (i.e. FreeHostia)
  • UberGallery or another PHP photo gallery which polls a folder to display images

Google Voice configuration

Google Voice supports forwarding text and mms messages you receive to your GMail mailbox out of the box. If not already, simply enable the feature in settings:

Google Voice forward messages to GMail

UberGallery configuration

Install UberGallery on your website. Nothing special here; just download, upload to your server, unzip, and rename the galleryConfig ini file as described. I recommend using the “responsive” theme:

...

thumbnail_quality   = 75        ; Thumbnail quality from 1 - 100
                    ; Higher = better quality / slower
theme_name          = uber-responsive   ; Theme used to style the gallery

[advanced_settings]
...

The Flow (Microsoft Flow)

I used the following in my flow. Nothing revolutionary - just a little “glue” to get the job done.

GMail connector (and When a new email arrives trigger)

GMail trigger - when message arrives with filtering

To ensure the Flow only acted on MMS messages from Google Voice, I used filters based on Subject (“New text message from”) and the presence of attachments (Has Attachments). Since I needed to process attachments, they needed to be included as well (Include Attachments). This seemed to work, but I have read about others experiencing issues with filtering in the Trigger itself. If that occurs, the same can be accomplished with a Condition.

Switch case (statement)

Switch or case statement to identify images based on MIME type

I (erroneously) thought I would filter out images based on file extension - as it turns out, that is not possible. MIME type (or Content-Type in Flow) to the rescue! Using MIME type was more robust and easily implemented in Microsoft Flow. We know UberGallery only supports jpg, gif, and png images so it made sense to only FTP images of those types to the gallery.

There may be a cleaner way to make Flow decisions based on MIME type, but I opted for the Switch statement. In this case, I only match image/jpeg, image/gif, and image/png - the Default case does nothing (Content-Type does not match the 3 noted).

In this step, Flow automatically added the Apply to each attachment wrapper.

FTP(S) connector (and Create file action)

FTP or FTPS connector setup in MS Flow

When adding an FTP action to the first Case branch, the FTP(S) connector must be setup. Most of the options are self-explanatory (host, port, etc.). If your hosting provider offers FTPS, I highly recommend enabling that option (Enable SSL). I was not able to get certificate validation working, but anything beats clear text FTP connections.

Since I planned to transfer images (not text) via FTP, I also selected the Enable Binary Transport option. Failure to set “binary” or “bin” mode will result in corrupt images in the gallery.

FTP create file action and settings

In the FTP Create File action, I simply specified the file system path to my UberGallery gallery-images folder and sent the data from Content with a filename based on the GMail Message ID. This is not a perfect solution, but to avoid name collisions, I figured Message ID was as good a unique identifier as any. This yielded a gallery-images folder full of randomly named (but non-conflicting) image files.

Also, I appended the file extension manually in this step for each Case in the Switch statement (.jpg for image/jpeg, .gif for image/gif, etc.).

GMail connector (and Move email to trash action)

GMail connector - move processed messages to deleted items

Nothing special here - to keep my inbox tidy, I discarded messages once they were processed. The Deleted folder retains a little history if needed. To identify the message, I used Message ID.

The completed Flow looked like this

All Microsoft Flow steps

Possible applications

I am interested to hear if and how others use this. It is neat in principle and works reliably but I struggled to come up with a convincing list of possible uses. The following are my high-level thoughts:

  • Updating a specific image or gallery on a website on the fly where computer access is not available (for a specific, named image, UberGallery is not required)
  • Near real-time compilation and display of photos from a trip or vacation (multiple contributors texting images)
  • Image submission in areas with limited cellular coverage and/or legacy handsets (no email or app capability)
  • Internal applications where Flickr is not an acceptable solution

Appendix: Sample output of GMail When a new email arrives step for a Google Voice message

In case you need an example of the outputs from the GMail Email connector’s When a new email arrives Trigger

From
"(XXX) XXX-XXXX" <address@txt.voice.google.com>

To
address@gmail.com

Subject
New text message from (XXX) XXX-XXXX

Body
<html><head><style type="text/css">
    /* Disable the default font adjustment on iOS devices */
    div, p, a, li, td { -webkit-text-size-adjust:none; }
    /* Adjust the table width on the small screen */
    @media only screen
      and (max-width: 599px) {
      table[class="content-table"] {
        max-width: 360px !important;
      }
    }
    /* Enlarge the font size on mobile device */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 736px) {
      td[class="email-content-header"] {
        font-size: 20px !important;
        line-height: 28px !important;
      }
      td[class="email-content"] {
        font-size: 16px !important;
        line-height: 24px !important;
      }
    }
    /* Avoid the blue links on iOS devices for address, datetime and phone number */
    .links-date a {
      color: #000000;
      text-decoration: none;
    }
    .links-footer a {
      color: #757575;
      line-height: 12px;
      text-decoration: none;
    }
    .links-phone_number a {
      color: inherit;
      text-decoration: none;
    }
    </style></head>
    <body><table cellspacing="0" cellpadding="0" border="0" style="font-family: Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;"><tr><td><table cellspacing="0" cellpadding="0" border="0" width="600" class="content-table" style=" border-bottom: 1px solid #EEEEEE;"><tr><td align="left" style="padding: 32px;"><a href="https://www.google.com/voice/" target="_blank"><img alt="Google Voice" src="http://www.gstatic.com/voice-fe/google_voice_lockup.png" height="24"/></a></td></tr></table><table cellspacing="0" cellpadding="0" border="0" width="600" class="content-table" style="padding: 25px 32px; border-bottom: 1px solid #EEEEEE;"><tr><td style="font-size: 14px; line-height: 20px; padding: 25px 0;">MMS Received</td></tr><tr><td style="font-size: 14px; font-style: italic; line-height: 20px; color: #757575">To respond to this text message, reply to this email or visit Google Voice.</td></tr></table><table cellspacing="0" cellpadding="0" border="0" width="600" class="content-table" style="padding: 25px 32px; font-size: 9px; color: #757575;"><tr><td><table cellspacing="0" cellpadding="0" border="0" width="240" style="font-size: 9px; line-height: 14px;" class="footer-link"><tr><td style="padding-right: 5px;"><a href="https://www.google.com/voice/" target="_blank">YOUR ACCOUNT</a></td><td style="padding-right: 5px;"><a href="https://support.google.com/voice#topic=1707989" target="_blank">HELP CENTER</a></td><td><a href="https://productforums.google.com/forum/#!forum/voice" target="_blank">HELP FORUM</a></td></tr></table></td></tr><tr><td style="padding: 15px 0">To edit your email preferences for text messages, go to the <a href="https://www.google.com/voice/#voicemailsettings">Email notification settings</a> in your account.</td></tr><tr><td><img alt="Google" src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_dark_color_74x24dp.png" height="14" style="opacity: .5;"/></td></tr><tr><td style="padding: 15px 0; line-height: 12px;">Google Inc.<br><span class="links-footer">1600 Amphitheatre Pkwy<br>Mountain View CA 94043 USA</span></td></tr></table></td></tr></table></body></html>

Snippet
Google Voice MMS Received To respond to this text message, reply to this email or visit Google Voice. YOUR ACCOUNT HELP CENTER HELP FORUM To edit your email preferences for text messages, go to the

Message ID
15d29418a6285a15

CC

BCC

Label IDs
[
  "UNREAD",
  "IMPORTANT",
  "CATEGORY_UPDATES",
  "INBOX"
]

Received Date Time
2017-07-09T21:29:07+00:00

Estimated Size
1196519

Is Read?
false

Is HTML
true

Has Attachments
true

Attachments
[
  {
    "Name": "",
    "ContentBytes": "IOUnoiuansdoiunaoiwuboniunhjgkjawhejhawe <<this is just sample data - real Bytes redacted>>",
    "ContentType": "image/jpeg",
    "ContentId": "",
    "Size": 867337
  }
]

Thread ID
15d29418a6285a15