Programmatically add a new 'Accepted file extension'

JamieT — Thu, 27 Jun 2024 12:55:30 +0000

In the first post in the series around creating Umbraco Stuff programmatically is actually something that reminded me to start sharing my journey, and that is I needed to allow editors to upload '.mov' files and for these to be set as a Video media type.

OTB Umbraco has three extensions which dictate that the file is a Video and these are the following:

mp4
webm
ogv

So how do I programmatically add to this list? Let's start by looking at the configuration of this data type. If you get the ID of this data type by looking on the info section.

Gather information

The ID for this data type is -100 so let's look at the database



select * from umbracoDataType where nodeId = -100

We can see the configuration value by default as below, which matches the screen in Umbraco.



{
  "fileExtensions": [
    {
      "id": 0,
      "value": "mp4"
    },
    {
      "id": 1,
      "value": "webm"
    },
    {
      "id": 2,
      "value": "ogv"
    }
  ]
}

Now there is a level of risk with this, as this is an Umbraco property they could in theory release an update which modifies this configuration value so we'll need to keep an eye on any upgrades we do to ensure our changes are persisted, if you know of a safer way to do this, do let me know in the comments.

Ok, so we know what the data looks like, how do we add our new 'mov' extension.

Create the configuration and add our new extension.

After a bit of digging, I found the configuration class FileUploadConfiguration (https://apidocs.umbraco.com/v13/csharp/api/Umbraco.Cms.Core.PropertyEditors.FileUploadConfiguration.html)

So let's create a new instance and add the extensions we want.



var videoUploadFieldConfig = new FileUploadConfiguration()
{
    FileExtensions =
    [
        new FileExtensionConfigItem
        {
            Id = 0,
            Value = "mp4"
        },

        new FileExtensionConfigItem
        {
            Id = 1,
            Value = "webm"
        },

        new FileExtensionConfigItem
        {
            Id = 2,
            Value = "ogv"
        },

        new FileExtensionConfigItem
        {
            Id = 3,
            Value = "mov"
        }
    ]
};

Save our new configuration to the database

As we are editing a Data Type you first need to inject IDataTypeService.

Umbraco handles configurations of data types by accepting object? because each data type can potentially have a different configuration type. So we can simply save using the videoUploadFieldConfig as the configuration value, as so.



var dataType = _dataTypeService.GetDataType(name);
if (dataType == null)
    throw new Exception("Data Type not found");

dataType.Configuration = videoUploadFieldConfig;
_dataTypeService.Save(dataType);

Wala!

Existing media

Sadly the above will only assign any newly uploaded '.mov' files as a Video type, any existing files will need to be either uploaded again or manually updated.

Let me know if you want a post about doing this programmatically :)

My journey through programmatically creating Umbraco `stuff`

JamieT — Thu, 27 Jun 2024 12:07:54 +0000

I've been meaning to start sharing my journey through programmatically creating every document type, data type and everything in-between programmatically via Umbraco Package Migrations. The reason for this is so that I can create isolated packages, which when installed create and configures everything needed for this package without any dependencies.

Think of this example, I want to give editors a new 'Carousel' component they can add to the Block Grid. I would create a new Umbraco package, say as an RCL (Razor Class Lib) and include Umbraco Package Migrations, which in turn creates all of the data types, document types and then adds the new document type as an allowed Element of an Umbraco Grid.

Cool right? As this is using Umbraco Package Migrations this also gives us the ability to create new versions of the 'Carousel' package and Umbraco handles everything for us.

I am aiming to share how this journey has gone, how I've tackled certain problems and cool things I find out along the way. With Umbraco 14 and a lot of this stuff being created via JS, this may well need to be rewritten/reworked but for the foreseeable future Umbraco 13 is where it's at and perhaps I'll share how I tackle migrating to Bellissima when the time comes!