Configuring additional asset filetypes (and build a mp3 player for your website)

Sometimes you face the problem to add assets of a filetype that isn't configured in PresideCMS. For example audio or video files are not allowed by default. What happens is, that you're trying to upload a file and the asset manager comes up with the message, that assets of this type are not configured.

But it's really very easy to allow additional filetypes. Just add them in your config/config.cfc file like this:

settings.assetmanager.types.video.mp4 = { serveAsAttachment=false, mimeType="video/mp4"       };
settings.assetmanager.types.video.avi = { serveAsAttachment=false, mimeType="video/x-msvideo" };
settings.assetmanager.types.video.wmv = { serveAsAttachment=false, mimeType="video/x-ms-wmv"  };
settings.assetmanager.types.video.mpg = { serveAsAttachment=false, mimeType="video/mpeg"      };

settings.assetmanager.types.audio.mp3 = { serveAsAttachment=false, mimeType="audio/mpeg"     };
settings.assetmanager.types.audio.wav = { serveAsAttachment=false, mimeType="audio/vnd.wav"  };
settings.assetmanager.types.audio.wma = { serveAsAttachment=false, mimeType="audio/x-ms-wma" };

Basically, that's it.

After a 'reload all' you can now upload assets with the additional filetypes. In the most cases PresideCMS already has an icon for the filetpye.

How to use the new file types

To make use of the new filetype you need to allow them in your presideobject. You can do this by adding the allowedTypes in your form.

Here you see a modified 'forms/page-types/homepage/edit.xml' file:

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <tab id="main">
        <fieldset id="main">
            <field binding="page.main_image" control="assetPicker" allowedTypes="image,video" multiple="false" quickAdd="true" quickEdit="true" />
        </fieldset>
    </tab>
</form>

From now on you can upload images and video files.

How to build a mp3 player for your website

A customer asked us to play mp3 files on his website. This is a really simple task to do.

Step 1: Add filetype

As seen above add the mp3-filetype in your config.cfc

Step 2: Create a widget for the mp3-player

Add a file 'forms/widgets/mp3.xml' with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<form i18nBaseUri="widgets.mp3Widget:">
    <tab>
        <fieldset>
            <field name="mp3" control="assetPicker" allowedTypes="audio" multiple="false" quickAdd="true" quickEdit="true" />
        </fieldset>
    </tab>
</form>

Step 3: Create a simple handler

The handler ('handlers/widgets/mp3.cfc') is really simple:

component {
    property name="presideObjectService"    inject="presideObjectService";

    public string function index( event, rc, prc, args={} ) {
        return renderView( view="widgets/mp3/index", args=args );
    }

    private string function placeholder( event, rc, prc, args={} ) {
        var mp3 = presideObjectService.selectData(
                objectName   = "asset"
            , selectFields = ['id','title','asset_url','author','description']
      , filter       = "id = '#args.mp3#'"
        );

        return renderView( view="widgets/mp3/placeholder", args= mp3);
    }

}

The function index is just forwarding to your view. The placeholder function let you see which file is selected for the widget.

Step 4: Create your views

For both functions of your handler your need a proper view:

views/widgets/mp3/index.cfm:

<cfif !isEmpty(args.mp3)>
    <cfoutput>
        <audio src="#event.buildLink( assetID=args.mp3)#" controls=""></audio>
    </cfoutput>
</cfif>

and for your placeholder:

views/widgets/mp3/placeholder.cfm:

<cfparam name="args.title" default="" />
<cfoutput>
MP3-Player: <cfif !isEmpty(args.title)><b>#args.title#</b></cfif>
</cfoutput>

And that's it! You have mp3 Player for your website.