FileMaker 13: Working with Base 64

Working with Base 64

FileMaker 13 introduces a couple new functions, Base64Decode and Base64Encode. Base64 is a commonly used method of encoding binary data as text. For example, it is a standard means of attaching files to email. When you attach a file to an email to send to a friend, your email application can encode the raw file as text using Base64. When the email is received, the program you use to read email decodes the attachment in order for you to save it to your computer.

Since it has been around a while and is a commonly used format on the internet, it is also well supported in web browsers.

This can reduce overhead and encapsulate data, including binary information.

What does this mean for FileMaker developers? There are a variety of use cases, and these built in functions are a welcome addition to the product. As a practical example, we will discuss using Base64 functions with web viewers to display data to users, and provide functionality not available with container fields on their own.

This also means you can break the dependency of external files and simply use a data url to display all images in a web viewer. No more writing container fields out to temporary directories!

To the example file!

For this example, I am using a loader gif generated at Ajaxload which might be used in a dialog to show while a script is being performed. It is not meant to give exact feedback as to how much of the process has been complete, but gives the user something to look at while the script is performed. That is tangental to our purposes, which is to encapsulate the binary image data and do something useful with it.

This particular example has the added benefit of being an animated gif. FileMaker will display the contents of a container, but it won’t show animation in gifs, so this demonstration adds functionality we wouldn’t normally get.

With nothing more than adding a file to the container field, we can perform a Base64Encode function on the container field in order to transform the contents, the file, to a text string.

By default, this function inserts line feeds at 76 columns with these two characters: Char ( “10” ) and Char ( “13” )

Now all we have to do is display that in a meaningful way…

Enter the Data URL

Data URLs have been around for a little while and are now well supported in most major browsers. As far as we are concerned with FileMaker web viewers, there are only two browsers that matter, and those are the ones that the web viewers use behind the scenes for rendering HTML. Those are Safari and Internet Explorer, for OS X and Window, respectively.

What a data URL does, is put all the html and everything that appears in a web browser and basically puts it all in the location field of a browser. Instead of getting information in the form of HTML from a location like “http://www.google.com,” all the data that is needed is in the URL.

Now we have something meaningful to do with this Base64 encoded string. With a data URL, we can “feed” our web viewer all the html and information it needs to display the container data. For HTML, we begin a data URL with “data:text/html,” and then all our HTML follows. For images, the data URL looks like “data:img/gif;base64,” followed by our string of text.

In the attached sample files, I include several examples of how to display either an image or PDF, stored in a container field, with a web viewer.

In the sample files, there is the above gif as well as a sample PDF that you can drop in the container field to see how the web viewer is set to handle either one.

Additionally, you can retrieve the data encoded as base64 and turn it back into a container field in FileMaker. Base64 on it’s own does not contain information about the file name, so you can specify the parameter in the Base64Decode function to give your binary data a filename to make it easier to export the contents to a file.

Use Case: Go and POST

In this way, it would now be possible to send binary data, as text, via a httppost url to a web script. The web script might then be accept the text submission and be able to transfer your data across the web to do something useful with.

One potential application would be for remote users, using an iPad, to…

1. Take a photo with FileMaker Go and insert it into a field…
2. Where a script would send that image to a PHP script as Base64 (using httppost)…
3. That inserted it into another FileMaker database as a text field…
4. Finally, it could then be rendered back out to an image file for display using the methods outlined above.

Hopefully we have shown some of the potential behind these nice new functions in FileMaker 13. They make a very nice addition to an update that is already full of worthy and compelling features.

Sample File