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 cause some confusion for people new to Episerver as when people start using the website for the first time, they might see errors/warnings that prevent them from using certain media files that you could easily assume should just work.   

If a content editor comes up to you and says 'Drag and drop are disabled for content areas' or 'Episerver won't allow me to upload an image' then this guide is for you.

On a brand new blank Episerver website, you will need to specify exactly what page types, blocks, and media the website will use.  Out of the box, if you try to add an image into Episerver you will likely find features, like drag and drop for images within the Episerver editor is disabled.  Luckily, fixing that is very simple, so read on to find out more.

On a brand new blank Episerver website, no media files are enabled by default within the editor.  This is a standard security practice, don't enable anything unless you explicitly enable it.   Enabling different types of media in Episerver is really quick and easy.  Allowing different types is done with a media descriptor.  Even though it's got a fancy pants complicated-sounding name you need to add a few basic classes into your solution and everything will magically work.

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 of your solutions assemblies to find any classes decorated with the [ContentType] attribute.

This process works the same for how Episerver reads your page and block type definitions! When it finds a class with a Content-Type attribute, it uses reflection to read the classes properties and then adds the contents of the file as an allowed media type.  

The default type of your class will need to inherit from is the 'MediaData'.  Episerver also has two specialized media types, ImageData and VideoData, which 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 alt text with any image that they upload.

You can simply add to the corresponding property. In the majority of cases, the classes above contain everything that you need.

If you need to do some more advanced stuff, then I suggest you head over to this page.