One of the cool things about Episerver is that it provides you with a blank canvas to build your website on. This blank canvas can be a source of confusion for people new to Episerver. When editors start using the editor for the first time and try to upload assets, they might see errors preventing them from uploading certain file types. Without understanding that Episerver blocks most media files by default the lead developer might need to quickly release a hotfix! If a content editor comes up to you and says 'Drag and drop does not work for content areas' or 'Episerver won't allow me to upload an image', this tutorial is for you.
On a brand new blank Episerver website, no media file support is enabled by default within the editor. This is a standard security practice, don't enable anything unless you explicitly enable need to. Enabling different types of media in Episerver is really quick and easy. Allowing different file types is done with a media descriptor. Even though it's got a fancy pant and complicated-sounding name, media descriptors are easy to master 💪💪💪
What's Going On Under The Covers?
To enable different media formats within your website, you will need to explicitly tell Episerver what to allow. This is done via writing a few custom C# classes. When your website first loads, Episerver scans all assemblies located within your solution to find any classes decorated with the [ContentType] attribute. This process works in exactly the same way as when Episerver scans your code for any page or block type definitions! When it finds a class with a [ContentType] attribute, it uses reflection to read the properties defined within the class. Based on that meta-data it configures the allowed media types.
The default type your class will need to inherit from is the MediaData. Episerver also has two specialized media base classes you can also inherit from, ImageData and VideoData. I'm sure you can figure out what they do! Below, defines the code snippets you'll need to include in your project to enable PDF's, Images and Videos.
Allowing PDFS
Allowing Images
Allowing Video
One of the benefits of using this approach is that as a developer, you can specify the properties that you want content editors to associate with certain files. If you want to allow content editors to add an alternative text property when they add images you can do that by updating the ImageData file. You simply add to the corresponding property to the class. In the majority of cases, the classes above will contain everything that you need to get going
If you need to do some more advanced stuff, then I suggest you head over to this page. Happy Coding 🤘
