Drag and Drop Images from a Web Viewer in FileMaker Pro 12 on a Macintosh


The Problem: FileMaker Pro 12 is turning out to be a great document and image management system with some of the new features to do with Container Fields. However there is one little annoying ‘feature’ holdover from previous versions —when using Drag and Drop of images from a Web Browser or Web Viewer (Sarari or Firefox) into container fields on a Macintosh, instead of an image showing up in the field, a text URL will be displayed.

The Solution: Fortunately FileMaker Pro 12 also brought the very useful Insert from URL script step. By employing a script trigger using the Insert from URL script step, the missing drag and drop functionality can be fixed.

Note: Drag and Drop is generally not an issue on Windows, where Drag and Drop from a Web Viewer seems to work well. What does not work on Windows is the ability to drag and drop an image from a Internet Explorer, though Firefox seems to work fine. I am not sure why this is so.

Demo File: Drag and Drop Images

The Problem: Drag and Drop from a Web Viewer or Web Browser into a container field does not work

wpid-screen_shot_2013-09-13_at_5-28-06_pm.png

In the demo file, images appear in a Web Viewer set to Bing’s image search. For the drag and drop to work effectively, you have to click into the ‘slideshow’ mode that Bing offers. Click on an image and comes up in a black background with forward and backward arrows. Drag and drop from there. If you drag and drop from the main screen, you always end up with URLs instead.

Instead of an image popping up in the Container Field, a URL is displayed

wpid3647-media_1379118516752.png

The same issue occurs when dragging from a Web Browser to a Container field

wpid-screen_shot_2013-09-13_at_5-31-46_pm.png

Note, drag and drop won’t work on Windows Internet Explorer either. Try Firefox if you need to do this on Windows.

Image Search in a Web Viewer

wpid3655-media_1379121395152.png

The Image Search Web Viewer in the demo file is set to search Bing using the First and Last Name entered in the fields to the left.

http://www.bing.com/images/search?q=”& Contacts::First & “+” & Contacts::Last

The Solution: A Script Trigger — Get Image from URL

wpid3648-media_1379118786822.png

Get Image from URL Script Trigger

wpid3652-media_1379119316630.png

This script could be distilled down to two steps:

1) Set a variable from the text in the Container field
2) Use that variable to Insert from URL

The rest is just error checking.

To add this script to your solution, replace all the Image Container fields below with your own.

#If it is a Mac
If [Abs(Get ( SystemPlatform ))=1]
#Don’t do anything if the Container field is empty.
If [IsEmpty(Contacts::Photo | Container)]
Halt Script
End If
#If the URL ends in one of the common graphics endings and is not too big
If [Right(Contacts::Photo | Container; 4) =”.jpg” or
Right(Contacts::Photo | Container; 4) =”.png” or
Right(Contacts::Photo | Container; 4) =”.tif” or
Right(Contacts::Photo | Container; 5) =”.tiff” or
Right(Contacts::Photo | Container; 4) =”.pdf”
and Length(Contacts::Photo | Container)<1000]
#Turn Error Capture ON to avoid error messages from slow web servers
Set Error Capture [On]
#Set a variable to the current text content of the container field (a URL)
Set Variable [$ImageURL; Value:Contacts::Photo | Container]
#Insert the graphic from the URL into the Image Container field.
Insert from URL [Select; No dialog; Contacts::Photo | Container; $ImageURL]
End If
End If

Attach the script to the Image Container field

wpid3649-media_1379118966144.png

Select the container field you wish to attach the script to.

Attach the Script Trigger to the Image Container field — Control-click on the field

wpid3650-media_1379118973465.png

Set the Script Trigger to OnObjectModify

wpid3651-media_1379118979372.png

Still Some Problems

wpid3653-media_1379119446341.png

This demo was built to work with Bing Image Search. Occasionally an image will have a .html or .htm ending, preventing the script from running. Select another image, or use Copy and Paste as an alternative.

Drag and Drop working as advertised on a Macintosh

wpid-screen_shot_2013-09-13_at_5-46-59_pm.png

Complete your collection

wpid3654-media_1379119658290.png

Now you will be able to complete your Star Trek character collection from the web with easy drag and drop from a Web Viewer or Web Browser. Like many of us, some of those people are starting to look old. Have fun!

Related Articles

Full City Computing Metadata Mapping: Under the Hood

FileMaker Geek CONTAINER DRAG N DROP FROM WEB BROWSER/VIEWER

 

3 Responses to “Drag and Drop Images from a Web Viewer in FileMaker Pro 12 on a Macintosh”

  1. Great idea. I’ve played around with it but still can’t get it to work…even with your demo file. It inserts the file but does not display as an image. Any ideas?

    • Hi Tim,

      Some ideas:

      Make sure the Toggle button is set to ‘On’. The script has a conditional to only run when in the On position.

      On Craigslist ads, I noticed that I am getting a Connection Failed dialog. I think this is something specific to that particular website, so I added a Set Error Capture On step, which seems to hide the issue.

      If you are running on Windows, you probably don’t need this script. In my test drag and drop of images worked as expected.

      I am running FileMaker 12.0v4.

      Turn on the Script Debugger and see if the script is being triggered.

      Perhaps try it with a variety of different websites. I notice that some web pages don’t give up their images easily, employing Javascript to blog drag and drop.

      Let me know if this gets you anywhere.

      Doug

Trackbacks/Pingbacks

  1. Container Drag n Drop From Web Browser/Viewer | FileMaker Geek - December 5, 2013

    […] I came across a technique by Douglas Alder of HomeBase software recently which demonstrated a cool technique on how to use drag and drop from a web browser to […]