Sending Images via SMS with Filepicker and Twilio

Even when you get the basics figured out, all that you have working is something that allows your users to upload files from their computer. If you want to enable your users to choose photos and files from a service like Facebook, Dropbox, Google Drive or Flickr, well, that’s a whole other story. Integrating these different APIs, normalizing response formats, and maintaining these integrations can be time consuming.

Does this sound familiar? If it does, you will be excited to learn that Filepicker.io has made this process a whole lot easier. Filepicker.io provides APIs to connect, process, and store any piece of content in your web application. For example if you are building an application that needs to send files or photos to your users via SMS, then you can use Filepicker.io with Twilio to make this happen. Let’s explore how to build this.

With Filepicker.io, here is the bare minimum HTML that you will need to write to enable someone to send a link to an image via SMS:

As you look over the HTML, pay special attention to the tag and the two

After someone has used the Filepicker.io dialog to select an image, a URL to that image is inserted into the value of the tag. That URL is what will be submitted as part of the HTTP POST request that will be made when the “Send File” button is clicked.

So far, all that we have is some HTML that will submit a phone number and URL via a POST request. To actually send the message we will need a little bit of server side logic to take the URL and send the SMS to the phone number. For this, we will be using Python with the Flask web development framework. Here is a simple Flask application that will do just that:

If you want to run the code above, here is what you’ll need to do:

1. Save the Python code in a file named “app.py”.
2. Create a directory named “templates” in the same directory as the “app.py” file.
3. Save the HTML in a file named “simple.html” in the “templates” directory.
4. Run “pip install Flask“
5. Run “pip install twilio“
6. Run “python app.py“
7. Open http://localhost:5000/ in your web browser of choice.

At this point, we have a very basic looking application. It works, but doesn’t look great. Let’s fix that by adding some design from Twitter Bootstrap and a little bit of error handling.

For the design, Twitter Bootstrap comes with CSS for a very nice looking “Horizontal form“. It looks nice, but requires a pretty substantial change to our HTML. For this we will start by modifying the Bootstrap “starter template“, remove the “navbar” and then enter the following HTML into the

Next, lets add some more HTML to let us know if there was an issue sending the SMS or to show us that the SMS was sent successfully. To only show the messages when appropriate, we will use the conditional blocks from the Jinja2 tempting language that Flask uses. Here is what those look like:

And finally, we will update our backend code to take advantage of those changes. Here are the updates that we will make:

• Display success or failure messages when appropriate
• Add the bare minimum of error handling
• Switch to using environment variables for configuration, so that we can host this code on Heroku.

After these changes, we’ve got quite a bit more code, but the page we render looks much nicer:

Here is what the page will look like after picking a file and clicking the “Send File” button. You can see that one of the conditional templates has been activated and is showing us what image we just sent and who we sent the image URL to:

Want to try this code out for yourself? Here are the commands that you’ll need to run:

1. git checkout https://github.com/jpf/filepicker-twilio-example
   • For this to work, you will need to have git installed on your computer. If you don’t have git installed, installing the Heroku Toolbelt in step 3 will take care of that for you. GitHub also has great instructions on how to install git.
2. cd filepicker-twilio-example
3. heroku create
   • For this to work, you’ll need an account Heroku and the Heroku Toolbelt installed. Here are instructions on how to get started with Heroku.
4. heroku config:add TWILIO_ACCOUNT_SID="{{ your Twilio Account SID }}"
5. heroku config:add TWILIO_AUTH_TOKEN="{{ your Twilio Auth Token }}"
6. heroku config:add TWILIO_FROM_NUMBER="+1YOURPHONENUMBER"
   • Get this information from your Twilio account. If you don’t have one already, sign up for a Twilio account here.
     You will find the values for your “Account SID” and “Auth Token” in your Twilio account here: https://www.twilio.com/user/account
     Set “TWILIO_FROM_NUMBER” to any Twilio number you own, you can see a list of what numbers you own here: https://www.twilio.com/user/account/phone-numbers/incoming
7. heroku config:add FILEPICKER_API_KEY="{{ your filepicker api key}}"
   • This is your Filepicker API key. If you don’t have a Filepicker account yet. If you don’t have one already, sign up for a Filepicker account here.
     You will find your Filepicker API key here: https://developers.filepicker.io/home/
8. heroku config
   • Make sure it’s all the settings are correct!
9. git push heroku master
10. heroku open

The last command will open your web browser. The browser will load the address where Heroku is hosting the SMS application we have been building. Once you’re looking at the application, here is what you’ll need to do to send yourself a link to an image:

1. Enter in your cellphone number.
2. Click the “Pick File” button and upload an image.
3. Click “Send File” button.

A few seconds after you click the “Send File” button, you will receive an SMS with a URL for the image you just uploaded.

This is a simple demo, but I hope that I’ve given you a taste of the cool things you can do with Filepicker, Twilio, and about 93 lines of code.

What other cool things can you think of that can be built with Filepicker.io and Twilio?