BlogFileMaker

FileMaker 13: Working with Base 64

By June 17, 2014 17 Comments

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.

Container field
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.

Raw data
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.

Loading

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.

Download Base64 Example Files – ZIP

Mike Duncan

Mike Duncan

Mike is a Senior AWS Cloud Engineer and an AWS Certified Solutions Architect as well as a certified FileMaker Developer. In addition to his work, Mike also enjoys pursuing his art, freelance writing, traveling, and spending time with his family.

17 Comments

  • Avatar Don Clark says:

    Very well done! Your explanation of how base64 handles transforming pictures to text and back is easy to read and sheds light on a difficult subject. The animates gif is a nice touch!

  • Avatar Alec Gregory says:

    Base64 is a great addition to FileMaker. I was desperate for it last year when developing a solution that used web viewers for much of the user interface.

    Right now I’m using Base64Encode to upload images to WordPress via xmlrpc. It’s great to be able to skip the ftp upload step, which requires a FileMaker plugin or external component.

  • Avatar Robert Jackson says:

    Nice and tidy options for using animated gifs in FileMaker layouts – thanks for sharing

  • Avatar Walter Noia says:

    Hi Mike

    Great Feature !!!

    In the example i don┬┤t understand why it is not possible to resize the webviewer when I try to make the webviewer the size off the gif image it stop s the gif from rotating.

    Any Idea ?

    Thanks

  • Avatar Mike Duncan says:

    You might notice some oddness under Yosemite when displaying in a web viewer. I notice that the technique to use css to display as background still works for gif animations, but you may want to test with the latest OS release, as usual.

  • Avatar Wilfrid Schichl says:

    Hi
    Great, but I was also wondering why resizing the web viewer doesn’t work… would appreciate very much a solution to that, thanks anyway,
    Wilfrid

  • Avatar Mike Duncan says:

    Wilfrid, you can resize the web viewer along with the size of the window if you anchor it in the layout. If you want the content to redraw based on the size of the web viewer also, that is possible by adding a dynamic parameter to the data URL such as getting the object's attribute or window width and pass that into the URL as well.

  • Avatar Micki says:

    Great article.

  • Avatar Makah Encarnacao says:

    Thanks Mike, this is so helpful!

  • Hi Mike
    This was very helpful. I was hoping this approach would allow me to scroll the PDF when being viewed using WebDirect and iPad (iOS device). It goes allow this scrolling using WebDirect on my Mac/PC but only displays the first page of the PDF when viewed using Web Direct and iPad. Is this expected behaviour or am I doing something wrong?

    Thanks again.

    • Avatar Mike Duncan says:

      I have not tested with webdirect on iPad. However, this appears to be a limitation of viewing PDFs embedded in iframes on iOS in general. If you search the web for this issue, you will find some say to use google drive to view, but it will not work with a data url.

  • Avatar Sarah says:

    Thank you very much!
    I’ve a question please: is that possible to set a transparent background?
    Thanks in advance

  • Avatar André Van haren says:

    I cannot get it to work. The animation works when running it from the layout manager in Browse mode, but not when I run a script where I open a new window and go to this layout. Any suggestions?

  • Avatar Philip Jaffe says:

    Gifs display correctly on a Mac, but on PC, if the script leaves the focus of the window that holds the gif’s web viewer, the animation freezes. When Focus returns, it refreshes the webviewer.

    Any thoughts? Ever seen this behavior?

    FileMaker Pro Advanced 18

    macOS Catalina.
    Windows 10

    • Avatar Mike Duncan says:

      This is related to the Internet Explorer settings on the PC. If you launch IE and go to the Advanced tab under Internet Options, make sure “Play animations in webpages” is checked. You may need to restart after that.

Leave a Reply