Published File Browser

The Published File Browser is a Javascript plugin used to create a pop-up window in your CMS or web management application. This enables web developers and integrators to place a "Fetch Image From IMS" button into a CMS, mailing list manager or other web tool. Using the button, a user working in your CMS can select a file from your Intelligent Media Server and embed a URL into the web or mail page they are editing so that the file will play or display when the page is opened – without the user having to exit the CMS. As well as embedding published files, you can also edit and crop them to suit the purpose, before embedding the link.

This feature is related to Publishing, a feature in IMS that enables you to place an asset on a fixed URL so that you can link that asset into web pages and emails. For details on how Publishing works, please refer to Access IMS from your CMS.

Example Code

The following code is a very simple example of how to invoke the Published File Browser to insert a published file into a page external to your Intelligent Media Server.

Replace the words your-ims-URL with the URL of your Intelligent Media Server.

<button onclick="LaunchPFBButton()">Fetch Image From IMS</button>
<img id="publishedImage" style="display:none"/>
 
<script type="text/javascript" src="http://your-ims-URL/j/external/prototype-1.7.0.0.js"></script>
<script type="text/javascript" src="http://your-ims-URL/j/external/ims-api-1.1.js"></script>
<script type="text/javascript" src="http://your-ims-URL/j/external/ims-js-libs-1.0.js"></script>
<script type="text/javascript" src="http://your-ims-URL/j/external/published-file-browser-1.2.js"></script>
<script type="text/javascript">
    // Create a PFB object
    myPublishedFileBrowser = new IMS.PublishedFileBrowser("http://your-ims-URL/");
 
    // Example of how to open the PFB. 
    function LaunchPFBButton() {
        document.getElementById("publishedImage").style.display = "none";
        myPublishedFileBrowser.open();
    }
 
    // Example of handling the publishedFileChosen event.
    myPublishedFileBrowser.observe("publishedFileChosen", HandlePublishedFileChosenEvent);
 
    function HandlePublishedFileChosenEvent(e) {
        document.getElementById("publishedImage").src = e.memo.url;
        document.getElementById("publishedImage").width = e.memo.width;
        document.getElementById("publishedImage").height = e.memo.height;
        document.getElementById("publishedImage").style.display = "";
    }
</script>

Published File Browser Memo Object

The example above shows how the calling page can retrieve details of the chosen published file. There are three steps:

1. Create an IMS.PublishedFileBrowser object
2. Launch the Published File Browser by calling the open() method on the IMS.PublishedFileBrowser object
3. Listen for the publishedFileChosen event by calling the observe() method on the IMS.PublishedFileBrowser object.

When the publishedFileChosen event is fired, the IMS.PublishedFileBrowser object will pass back details of the chosen published file in the memo field of the event object. The example above uses the Published File's url, width and height to display the file on the page.

There are a number of other details available as detailed below:

Advanced Usage

The simple example above will be suitable in most cases. However, there are also a number of options.

Options for the IMS.PublishedFileBrowser Object

The constructor of the IMS.PublishedFileBrowser is defined as follows:

IMS.PublishedFileBrowser(string imsHost="", object options=null)

• The imsHost parameter may be null or an empty string. If so the Published File Browser will attempt to use the same URL as the page the code is on. This is generally only useful if you are adding the Published File Browser directly into IMS using the template system.
• The options parameter can take the following options:
  • showClose - boolean (default:true) - whether to show a "Close" link in the top right corner of the browser
  • showLogout - boolean (default:true) - whether to show a "Logout" link in the top right corner of the browser
  • openInModal - boolean (default:true) - whether to launch the browser using a built-in modal dialog
  • container - string (default:null) - the id of a <div> into which the browser will be rendered
  • windowTitle - string (default:"IMS Published File Browser") - the title displayed in the file browser

The openInModal option allows you to control more precisely how the Published File Browser is displayed. You might do this, for example, if your CMS has its own modal widgets. If use this you will probably need to listen for and handle a number of other events as discussed below. The openInModal and container options are related - if you specify false for openInModal then you must also specify a container.

Events fired by the IMS.PublishedFileBrowser Object

The IMS.PublishedFileBrowser object fires events at specific times during its operation: