Can not upload an image file in EPiServer?

When you start work on a new Episerver project, at some stage a content editor will want to upload an image into Episerver.  When you try to upload an image using the Media Library uploader, you will see a failed upload message.

Failed_image_Upload

Why does this happen?

By default, no built-in media types exist in Episerver, this means you have to define what types you want to allow within your project.  To register available media types within your project, you will need a ‘media descriptor’.

When Episerver runs, it scans the bin folder for any assemblies that have classes decorated with [ContentType] attribute.  When it finds a class decorated with [ContentType] it registers.  To register a media type you need to create a class that inherits from MediaData.

You also have to define a “media descriptor” that registers the file types you want to work with.  The MediaDescriptor attribute defines the allowed file extensions.  The code for a media descriptor looks like this:

[ContentType]
[MediaDescriptor(ExtensionString = "pdf")]
public class GenericFile : MediaData
{
}

After you add this class into your project, the media up-loader will magically work.

Adding a preview thumbnail within the editor

In the code above, we have registered a generic media type that will allow use to upload and file type we want.  Out of the box Episerver two additional specialized base classes, ImageData and VideoData.

In the code above, if we change MediaData to ImageData, Episerver will render a thumbnail in the user interface:

[ContentType]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,gif,bmp,png")]
public class ImageFile : ImageData
{
public virtual string AlternativeText { get; set; }
}

Image Descriptor

As well as defining allowed file types, we can also set other attributes about the image.  The ImageDescriptor attribute, for example, can be used to define scaled images.

[ContentType]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,gif,bmp,png")]
public class ImageFile : ImageData
{
[ImageDescriptor(Width = 50, Height = 50)]
public override Blob Thumbnail
{
get { return base.Thumbnail; }
set { base.Thumbnail = value; }
}
public virtual string AlternativeText { get; set; }
}

Create a Custom View for media files

Now we can finally upload an image into Episerver, we now need to render it within the website.  We can do this using this code:

[Display(Name = "Main Hero Image",
GroupName = SystemTabNames.Content,
Order = 20)]
[UIHint(UIHint.Image)]
public virtual ContentReference MainHeroImmage { get; set; }

If you try to render an image just using the code above the image picker, you only get access to the content reference Id and not the actual image itself.  This means every time that you want to render an image, you need to duplicate the code to get the asset from Episerver, which is far from ideal.

Instead of duplicating this API call everywhere, we can create create a custom view that contains the code for getting the image in a single place.  We can do this by creating a custom display template.

In your project, create a folder called the following folder structure:

  • Views
  • Shared
  • DisplayTemplates

To override the rendering, you need to create a file with the same name of the UIHint we used in the property definition above.  In our case this is ‘Image’ but you could also change the UiHint to a more generic MediaFile type. Your view should now look like this:

@using JonDJones.com.Core.Media
@using EPiServer
@using EPiServer.ServiceLocation
@using EPiServer.Web.Mvc.Html
@model EPiServer.Core.ContentReference
@{
var df = ServiceLocator.Current.GetInstance<IContentRepository>();
ImageFile image = null;
if (Model != null)
{
image = df.Get<ImageFile>(Model);
}
}
@if (image != null)
{
<img src="@Url.ContentUrl(Model)" alt="@(image.AlternativeText ?? string.Empty)"/>
}

Conclusion

In this tutorial, we have covered why you can’t upload an image by default in Episerver, how to register the file extensions you want content editors to be able to upload and how to create a custom view so images are automatically rendered correctly.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *