From 3fc06b5fd556972d60dd884d42dc8544e52a5998 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 2 Sep 2020 15:46:54 +0200
Subject: [PATCH] new output for media

---
 zero.Core/Api/MediaApi.cs                     | 176 +++++++++++--
 zero.Core/Api/MediaFolderApi.cs               |  38 +--
 zero.Core/Api/MediaUploadApi.cs               | 143 -----------
 zero.Core/Database/Indexes/Media_ByParent.cs  |  41 +++
 zero.Core/Entities/Media/Media.cs             |   7 +-
 zero.Core/Entities/Media/MediaFolder.cs       |  23 +-
 zero.Core/Entities/Media/MediaListItem.cs     |  25 ++
 zero.Core/Entities/Media/MediaListQuery.cs    |   8 +-
 zero.Core/Validation/MediaFolderValidator.cs  |   2 +-
 .../App/components/datagrid/datagrid.vue      |  12 +-
 zero.Web.UI/App/pages/media/folder.vue        |   2 +-
 .../App/pages/media/media-item-old.vue        |  41 +++
 zero.Web.UI/App/pages/media/media-item.vue    |  63 ++++-
 zero.Web.UI/App/pages/media/media.vue         | 234 +-----------------
 zero.Web.UI/App/resources/media.js            |   6 +
 zero.Web/Controllers/MediaController.cs       |  97 ++------
 zero.Web/Controllers/MediaFolderController.cs |  48 +---
 zero.Web/Defaults/ZeroBackofficePlugin.cs     |   3 +-
 zero.Web/Models/MediaListResultModel.cs       |   6 +-
 19 files changed, 427 insertions(+), 548 deletions(-)
 delete mode 100644 zero.Core/Api/MediaUploadApi.cs
 create mode 100644 zero.Core/Database/Indexes/Media_ByParent.cs
 create mode 100644 zero.Core/Entities/Media/MediaListItem.cs
 create mode 100644 zero.Web.UI/App/pages/media/media-item-old.vue

diff --git a/zero.Core/Api/MediaApi.cs b/zero.Core/Api/MediaApi.cs
index 46e340df..b5504cf1 100644
--- a/zero.Core/Api/MediaApi.cs
+++ b/zero.Core/Api/MediaApi.cs
@@ -3,12 +3,32 @@ using System.Collections.Generic;
 using System.Threading.Tasks;
 using zero.Core.Entities;
 using zero.Core.Extensions;
+using Microsoft.AspNetCore.Http;
+using SixLabors.ImageSharp;
+using SixLabors.ImageSharp.PixelFormats;
+using SixLabors.ImageSharp.Processing;
+using System;
+using System.IO;
+using System.Linq;
+using System.Threading;
+using zero.Core.Database.Indexes;
+using Raven.Client.Documents;
 
 namespace zero.Core.Api
 {
   public class MediaApi : AppAwareBackofficeApi, IMediaApi
   {
-    protected IPaths Paths { get; private set; }
+    protected const char PATH_SEPARATOR = '/';
+
+    protected const string PATH_PREFIX = "/uploads";
+
+    protected const string THUMB_EXTENSION = ".thumb";
+
+    protected const string PREVIEW_EXTENSION = ".preview";
+
+    protected string[] ImageExtensions = new[] { ".jpg", ".jpeg", ".png", ".bmp", ".webp", ".jfif", ".gif" };
+
+    protected IPaths Paths { get; set; }
 
 
     public MediaApi(IBackofficeStore store, IPaths paths) : base(store)
@@ -18,7 +38,7 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<Media> GetById(string id)
+    public async Task<IMedia> GetById(string id)
     {
       return await GetById<Media>(id);
     }
@@ -27,7 +47,7 @@ namespace zero.Core.Api
     /// <inheritdoc />
     public async Task<string> GetSourceById(string id, bool thumb = false)
     {
-      Media media = await GetById(id);
+      IMedia media = await GetById(id);
 
       if (media == null)
       {
@@ -39,23 +59,23 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<Dictionary<string, Media>> GetById(IEnumerable<string> ids)
+    public async Task<Dictionary<string, IMedia>> GetById(IEnumerable<string> ids)
     {
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
       {
-        return await session.LoadAsync<Media>(ids);
+        return await session.LoadAsync<IMedia>(ids);
       }
     }
 
 
     /// <inheritdoc />
-    public async Task<ListResult<Media>> GetByQuery(MediaListQuery query)
+    public async Task<ListResult<IMedia>> GetByQuery(MediaListQuery query)
     {
       query.SearchFor(entity => entity.Name);
 
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
       {
-        return await session.Query<Media>()
+        return await session.Query<IMedia>()
           .Scope(Scope)
           .WhereIf(x => x.FolderId == query.FolderId, !query.FolderId.IsNullOrEmpty(), x => x.FolderId == null)
           .ToQueriedListAsync(query);
@@ -64,7 +84,27 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<EntityResult<Media>> Save(Media model)
+    public async Task<ListResult<MediaListItem>> GetListByQuery(MediaListItemQuery query)
+    {
+      query.SearchFor(entity => entity.Name);
+
+      query.OrderQuery = q => q
+        .OrderByDescending(x => x.IsFolder)
+        .ThenBy(query.OrderBy, query.OrderIsDescending, query.OrderType == ListQueryOrderType.String ? OrderingType.String : OrderingType.Double);
+
+      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      {
+        return await session.Query<MediaListItem, Media_ByParent>()
+          .ProjectInto<MediaListItem>()
+          .Scope(Scope)
+          .WhereIf(x => x.ParentId == query.FolderId, !query.FolderId.IsNullOrEmpty(), x => x.ParentId == null)
+          .ToQueriedListAsync(query);
+      }
+    }
+
+
+    /// <inheritdoc />
+    public async Task<EntityResult<IMedia>> Save(IMedia model)
     {
       model.IsActive = true;
       return await SaveModel(model);
@@ -72,9 +112,9 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<EntityResult<Media>> Delete(string id)
+    public async Task<EntityResult<IMedia>> Delete(string id)
     {
-      return await DeleteById<Media>(id);
+      return await DeleteById<IMedia>(id);
     }
 
 
@@ -83,6 +123,100 @@ namespace zero.Core.Api
     {
       await Task.Delay(0);
     }
+
+
+    /// <inheritdoc />
+    public async Task<Media> Upload(IFormFile file, string folderId, CancellationToken cancellationToken = default)
+    {
+      Media media = new Media();
+
+      // generate file id which is used as the folder name on disk
+      media.FileId = Guid.NewGuid().ToString();
+      media.FolderId = folderId;
+
+      // generate file name
+      media.Name = Safenames.File(file.FileName);
+
+      // build folder and full file path
+      string folderPath = Path.Combine(Paths.Media, media.FileId);
+      string filePath = Path.Combine(folderPath, media.Name);
+      string extension = Path.GetExtension(filePath);
+
+      // find media type
+      media.Type = ImageExtensions.Contains(extension, StringComparer.InvariantCultureIgnoreCase) ? MediaType.Image : MediaType.File;
+
+      Paths.Create(folderPath);
+
+      // write media file to disk
+      using (var stream = File.Create(filePath))
+      {
+        await file.CopyToAsync(stream, cancellationToken);
+      }
+
+      // set new properties
+      media.Source = Path.Combine(PATH_PREFIX, media.FileId, media.Name).Replace(Path.DirectorySeparatorChar, PATH_SEPARATOR);
+      media.Size = file.Length;
+
+      // write additional image data + thumbnail
+      if (media.Type == MediaType.Image)
+      {
+        using (Image<Rgba32> image = Image.Load<Rgba32>(filePath))
+        {
+          media.ImageMeta = GetImageMeta(image);
+
+          Image<Rgba32> imageFrame = media.ImageMeta.Frames > 1 ? image.Frames.CloneFrame(0) : image;
+
+          media.PreviewSource = SaveThumbnail(media, imageFrame, PREVIEW_EXTENSION, new ResizeOptions()
+          {
+            Size = new Size(210, 210),
+            Mode = ResizeMode.Min
+          });
+
+          media.ThumbnailSource = SaveThumbnail(media, imageFrame, THUMB_EXTENSION, new ResizeOptions()
+          {
+            Size = new Size(100, 100),
+            Mode = ResizeMode.Max
+          });
+        }
+      }
+
+      return media;
+    }
+
+
+    /// <summary>
+    /// Saves a thumbnail of an image
+    /// </summary>
+    string SaveThumbnail(IMedia media, Image<Rgba32> image, string extensionPrefix, ResizeOptions resizeOptions)
+    {
+      string extension = Path.GetExtension(media.Source);
+
+      image.Mutate(x => x.Resize(resizeOptions));
+
+      string thumbFileName = media.Name.TrimEnd(extension) + extensionPrefix + extension;
+      image.Save(Path.Combine(Paths.Media, media.FileId, thumbFileName));
+      return Path.Combine(PATH_PREFIX, media.FileId, thumbFileName).Replace(Path.DirectorySeparatorChar, PATH_SEPARATOR);
+    }
+
+
+    /// <summary>
+    /// Create image data if available
+    /// </summary>
+    MediaImageMeta GetImageMeta(Image<Rgba32> image)
+    {
+      var pngMetadata = image.Metadata.GetPngMetadata();
+
+      return new MediaImageMeta()
+      {
+        Width = image.Width,
+        Height = image.Height,
+        CreatedDate = new DateTimeOffset(image.Metadata.IccProfile?.Header?.CreationDate ?? DateTime.Now),
+        DPI = image.Metadata.HorizontalResolution,
+        ColorSpace = image.Metadata.IccProfile?.Header?.DataColorSpace.ToString(),
+        HasTransparency = pngMetadata?.HasTransparency ?? false,
+        Frames = image.Frames.Count
+      };
+    }
   }
 
 
@@ -91,7 +225,7 @@ namespace zero.Core.Api
     /// <summary>
     /// Get media by Id
     /// </summary>
-    Task<Media> GetById(string id);
+    Task<IMedia> GetById(string id);
 
     /// <summary>
     /// Get media source by Id
@@ -101,26 +235,36 @@ namespace zero.Core.Api
     /// <summary>
     /// Get media by ids
     /// </summary>
-    Task<Dictionary<string, Media>> GetById(IEnumerable<string> ids);
+    Task<Dictionary<string, IMedia>> GetById(IEnumerable<string> ids);
 
     /// <summary>
-    /// Get all available media items (with query)
+    /// Get all available media items with query
     /// </summary>
-    Task<ListResult<Media>> GetByQuery(MediaListQuery query);
+    Task<ListResult<IMedia>> GetByQuery(MediaListQuery query);
+
+    /// <summary>
+    /// Get all available media items (including folders) with query
+    /// </summary>
+    Task<ListResult<MediaListItem>> GetListByQuery(MediaListItemQuery query);
 
     /// <summary>
     /// Creates or updates a media item
     /// </summary>
-    Task<EntityResult<Media>> Save(Media model);
+    Task<EntityResult<IMedia>> Save(IMedia model);
 
     /// <summary>
     /// Deletes a media item by Id
     /// </summary>
-    Task<EntityResult<Media>> Delete(string id);
+    Task<EntityResult<IMedia>> Delete(string id);
 
     /// <summary>
     /// Clean-up all media based on stored database information
     /// </summary>
     Task Cleanup();
+
+    /// <summary>
+    /// Uploads a file to the media folder
+    /// </summary>
+    Task<Media> Upload(IFormFile file, string folderId, CancellationToken cancellationToken = default);
   }
 }
diff --git a/zero.Core/Api/MediaFolderApi.cs b/zero.Core/Api/MediaFolderApi.cs
index 57346ff0..f71dff89 100644
--- a/zero.Core/Api/MediaFolderApi.cs
+++ b/zero.Core/Api/MediaFolderApi.cs
@@ -17,18 +17,18 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<MediaFolder> GetById(string id)
+    public async Task<IMediaFolder> GetById(string id)
     {
-      return await GetById<MediaFolder>(id);
+      return await GetById<IMediaFolder>(id);
     }
 
 
     /// <inheritdoc />
-    public async Task<IList<MediaFolder>> GetAll(string parentId = null)
+    public async Task<IList<IMediaFolder>> GetAll(string parentId = null)
     {
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
       {
-        return await session.Query<MediaFolder>()
+        return await session.Query<IMediaFolder>()
           .Scope(Scope)
           .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
           .OrderByDescending(x => x.Name)
@@ -45,7 +45,7 @@ namespace zero.Core.Api
 
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
       {
-        IList<MediaFolder> folders = await session.Query<MediaFolder>()
+        IList<IMediaFolder> folders = await session.Query<IMediaFolder>()
           .Scope(Scope)
           .WhereIf(x => x.ParentId == parentId, !parentId.IsNullOrEmpty(), x => x.ParentId == null)
           .OrderByDescending(x => x.Name)
@@ -57,7 +57,7 @@ namespace zero.Core.Api
         {
           MediaFolder_ByHierarchy.Result result = await session.Query<MediaFolder_ByHierarchy.Result, MediaFolder_ByHierarchy>()
             .ProjectInto<MediaFolder_ByHierarchy.Result>()
-            .Include<MediaFolder_ByHierarchy.Result, MediaFolder>(x => x.Path.Select(p => p.Id))
+            .Include<MediaFolder_ByHierarchy.Result, IMediaFolder>(x => x.Path.Select(p => p.Id))
             .Scope(Scope)
             .FirstOrDefaultAsync(x => x.Id == activeId);
 
@@ -78,7 +78,7 @@ namespace zero.Core.Api
           .ToListAsync();
 
 
-        foreach (MediaFolder folder in folders)
+        foreach (IMediaFolder folder in folders)
         {
           int childCount = children.Count(x => x.Id == folder.Id);
 
@@ -121,28 +121,28 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<IList<MediaFolder>> GetHierarchy(string id)
+    public async Task<IList<IMediaFolder>> GetHierarchy(string id)
     {
       using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
       {
         MediaFolder_ByHierarchy.Result result = await session.Query<MediaFolder_ByHierarchy.Result, MediaFolder_ByHierarchy>()
           .ProjectInto<MediaFolder_ByHierarchy.Result>()
-          .Include<MediaFolder_ByHierarchy.Result, MediaFolder>(x => x.Path.Select(p => p.Id))
+          .Include<MediaFolder_ByHierarchy.Result, IMediaFolder>(x => x.Path.Select(p => p.Id))
           .Scope(Scope)
           .FirstOrDefaultAsync(x => x.Id == id);
 
         if (result == null)
         {
-          return new List<MediaFolder>();
+          return new List<IMediaFolder>();
         }
 
-        return (await session.LoadAsync<MediaFolder>(result.Path.Select(x => x.Id))).Select(x => x.Value).ToList();
+        return (await session.LoadAsync<IMediaFolder>(result.Path.Select(x => x.Id))).Select(x => x.Value).ToList();
       }
     }
 
 
     /// <inheritdoc />
-    public async Task<EntityResult<MediaFolder>> Save(MediaFolder model)
+    public async Task<EntityResult<IMediaFolder>> Save(IMediaFolder model)
     {
       model.IsActive = true;
       return await SaveModel(model, new MediaFolderValidator());
@@ -150,9 +150,9 @@ namespace zero.Core.Api
 
 
     /// <inheritdoc />
-    public async Task<EntityResult<MediaFolder>> Delete(string id)
+    public async Task<EntityResult<IMediaFolder>> Delete(string id)
     {
-      return await DeleteById<MediaFolder>(id);
+      return await DeleteById<IMediaFolder>(id);
     }
   }
 
@@ -162,17 +162,17 @@ namespace zero.Core.Api
     /// <summary>
     /// Get application by Id
     /// </summary>
-    Task<MediaFolder> GetById(string id);
+    Task<IMediaFolder> GetById(string id);
 
     /// <summary>
     /// Get hierarchy for a folder
     /// </summary>
-    Task<IList<MediaFolder>> GetHierarchy(string id);
+    Task<IList<IMediaFolder>> GetHierarchy(string id);
 
     /// <summary>
     /// Get all folders with the specified parent or on root
     /// </summary>
-    Task<IList<MediaFolder>> GetAll(string parentId = null);
+    Task<IList<IMediaFolder>> GetAll(string parentId = null);
 
     /// <summary>
     /// Get all folders with the specified parent or on root for tree output
@@ -182,11 +182,11 @@ namespace zero.Core.Api
     /// <summary>
     /// Creates or updates a folder
     /// </summary>
-    Task<EntityResult<MediaFolder>> Save(MediaFolder model);
+    Task<EntityResult<IMediaFolder>> Save(IMediaFolder model);
 
     /// <summary>
     /// Deletes a folder
     /// </summary>
-    Task<EntityResult<MediaFolder>> Delete(string id);
+    Task<EntityResult<IMediaFolder>> Delete(string id);
   }
 }
diff --git a/zero.Core/Api/MediaUploadApi.cs b/zero.Core/Api/MediaUploadApi.cs
deleted file mode 100644
index fb9584d0..00000000
--- a/zero.Core/Api/MediaUploadApi.cs
+++ /dev/null
@@ -1,143 +0,0 @@
-using Microsoft.AspNetCore.Http;
-using SixLabors.ImageSharp;
-using SixLabors.ImageSharp.PixelFormats;
-using SixLabors.ImageSharp.Processing;
-using System;
-using System.IO;
-using System.Linq;
-using System.Net.Http.Headers;
-using System.Threading;
-using System.Threading.Tasks;
-using zero.Core.Entities;
-using zero.Core.Extensions;
-
-namespace zero.Core.Api
-{
-  public class MediaUploadApi : IMediaUploadApi
-  {
-    protected IPaths Paths { get; set; }
-
-    private const char PATH_SEPARATOR = '/';
-
-    private const string PATH_PREFIX = "/uploads";
-
-    private const char SEP = ',';
-
-    private const string THUMB_EXTENSION = ".thumb";
-
-    private const string PREVIEW_EXTENSION = ".preview";
-
-    private const string UPLOAD_PREFIX = "upload:";
-
-    private string[] ImageExtensions = new[] { ".jpg", ".jpeg", ".png", ".bmp", ".webp", ".jfif", ".gif" };
-
-
-    public MediaUploadApi(IPaths paths)
-    {
-      Paths = paths;
-    }
-
-
-    /// <inheritdoc />
-    public async Task<Media> Upload(IFormFile file, string folderId, CancellationToken cancellationToken = default)
-    {
-      Media media = new Media();
-
-      // generate file id which is used as the folder name on disk
-      media.FileId = Guid.NewGuid().ToString();
-      media.FolderId = folderId;
-
-      // generate file name
-      media.Name = Safenames.File(file.FileName);
-
-      // build folder and full file path
-      string folderPath = Path.Combine(Paths.Media, media.FileId);
-      string filePath = Path.Combine(folderPath, media.Name);
-      string extension = Path.GetExtension(filePath);
-
-      // find media type
-      media.Type = ImageExtensions.Contains(extension, StringComparer.InvariantCultureIgnoreCase) ? MediaType.Image : MediaType.File;
-
-      Paths.Create(folderPath);
-
-      // write media file to disk
-      using (var stream = File.Create(filePath))
-      {
-        await file.CopyToAsync(stream, cancellationToken);
-      }
-
-      // set new properties
-      media.Source = Path.Combine(PATH_PREFIX, media.FileId, media.Name).Replace(Path.DirectorySeparatorChar, PATH_SEPARATOR);
-      media.Size = file.Length;
-
-      // write additional image data + thumbnail
-      if (media.Type == MediaType.Image)
-      {
-        using (Image<Rgba32> image = Image.Load<Rgba32>(filePath))
-        {
-          media.ImageMeta = GetImageMeta(image);
-
-          Image<Rgba32> imageFrame = media.ImageMeta.Frames > 1 ? image.Frames.CloneFrame(0) : image;
-
-          media.PreviewSource = SaveThumbnail(media, imageFrame, PREVIEW_EXTENSION, new ResizeOptions()
-          {
-            Size = new Size(210, 210),
-            Mode = ResizeMode.Min
-          });
-
-          media.ThumbnailSource = SaveThumbnail(media, imageFrame, THUMB_EXTENSION, new ResizeOptions()
-          {
-            Size = new Size(100, 100),
-            Mode = ResizeMode.Max
-          });
-        }
-      }
-
-      return media;
-    }
-
-
-    /// <summary>
-    /// Saves a thumbnail of an image
-    /// </summary>
-    string SaveThumbnail(IMedia media, Image<Rgba32> image, string extensionPrefix, ResizeOptions resizeOptions)
-    {
-      string extension = Path.GetExtension(media.Source);
-
-      image.Mutate(x => x.Resize(resizeOptions));
-
-      string thumbFileName = media.Name.TrimEnd(extension) + extensionPrefix + extension;
-      image.Save(Path.Combine(Paths.Media, media.FileId, thumbFileName));
-      return Path.Combine(PATH_PREFIX, media.FileId, thumbFileName).Replace(Path.DirectorySeparatorChar, PATH_SEPARATOR);
-    }
-
-
-    /// <summary>
-    /// Create image data if available
-    /// </summary>
-    MediaImageMeta GetImageMeta(Image<Rgba32> image)
-    {
-      var pngMetadata = image.Metadata.GetPngMetadata();
-
-      return new MediaImageMeta()
-      {
-        Width = image.Width,
-        Height = image.Height,
-        CreatedDate = new DateTimeOffset(image.Metadata.IccProfile?.Header?.CreationDate ?? DateTime.Now),
-        DPI = image.Metadata.HorizontalResolution,
-        ColorSpace = image.Metadata.IccProfile?.Header?.DataColorSpace.ToString(),
-        HasTransparency = pngMetadata?.HasTransparency ?? false,
-        Frames = image.Frames.Count
-      };
-    }
-  }
-
-
-  public interface IMediaUploadApi
-  {
-    /// <summary>
-    /// Uploads a file to the media folder
-    /// </summary>
-    Task<Media> Upload(IFormFile file, string folderId, CancellationToken cancellationToken = default);
-  }
-}
diff --git a/zero.Core/Database/Indexes/Media_ByParent.cs b/zero.Core/Database/Indexes/Media_ByParent.cs
new file mode 100644
index 00000000..8524ff5e
--- /dev/null
+++ b/zero.Core/Database/Indexes/Media_ByParent.cs
@@ -0,0 +1,41 @@
+using Raven.Client.Documents.Indexes;
+using System;
+using System.Linq;
+using zero.Core.Entities;
+
+namespace zero.Core.Database.Indexes
+{
+  public class Media_ByParent : AbstractMultiMapIndexCreationTask<MediaListItem>
+  {
+    public Media_ByParent()
+    {
+      AddMap<IMediaFolder>(items => items.Select(item => new MediaListItem
+      {
+        Id = item.Id,
+        AppId = item.AppId,
+        ParentId = item.ParentId,
+        CreatedDate = item.CreatedDate,
+        IsFolder = true,
+        Name = item.Name,
+        Image = null,
+        Size = 0
+      }));
+
+      AddMap<IMedia>(items => items.Select(item => new MediaListItem
+      {
+        Id = item.Id,
+        AppId = item.AppId,
+        ParentId = item.FolderId,
+        CreatedDate = item.CreatedDate,
+        IsFolder = false,
+        Name = item.Name,
+        Image = item.PreviewSource,
+        Size = item.Size
+      }));
+
+      StoreAllFields(FieldStorage.Yes);
+      Index(x => x.AppId, FieldIndexing.Exact);
+      Index(x => x.ParentId, FieldIndexing.Exact);
+    }
+  }
+}
diff --git a/zero.Core/Entities/Media/Media.cs b/zero.Core/Entities/Media/Media.cs
index 92108915..2f6aaaf2 100644
--- a/zero.Core/Entities/Media/Media.cs
+++ b/zero.Core/Entities/Media/Media.cs
@@ -3,9 +3,7 @@ using zero.Core.Attributes;
 
 namespace zero.Core.Entities
 {
-  /// <summary>
-  /// A media file (can contain an image or other media like videos and documents)
-  /// </summary>
+  /// <inheritdoc />
   public class Media : ZeroEntity, IMedia
   {
     /// <inheritdoc />
@@ -49,6 +47,9 @@ namespace zero.Core.Entities
   }
 
 
+  /// <summary>
+  /// A media file (can contain an image or other media like videos and documents)
+  /// </summary>
   [Collection("Media")]
   public interface IMedia : IZeroEntity, IAppAwareEntity, IZeroDbConventions
   {
diff --git a/zero.Core/Entities/Media/MediaFolder.cs b/zero.Core/Entities/Media/MediaFolder.cs
index d30c9b51..fb8c2678 100644
--- a/zero.Core/Entities/Media/MediaFolder.cs
+++ b/zero.Core/Entities/Media/MediaFolder.cs
@@ -1,16 +1,27 @@
-namespace zero.Core.Entities
+using zero.Core.Attributes;
+
+namespace zero.Core.Entities
 {
-  /// <summary>
-  /// A media folder contains media and other folders
-  /// </summary>
-  public class MediaFolder : ZeroEntity, IAppAwareEntity, IZeroDbConventions
+  /// <inheritdoc />
+  public class MediaFolder : ZeroEntity, IMediaFolder
   {
     /// <inheritdoc />
     public string AppId { get; set; }
 
+    /// <inheritdoc />
+    public string ParentId { get; set; }
+  }
+
+
+  /// <summary>
+  /// A media folder contains media and other folders
+  /// </summary>
+  [Collection("MediaFolders")]
+  public interface IMediaFolder : IZeroEntity, IAppAwareEntity, IZeroDbConventions
+  {
     /// <summary>
     /// Parent folder id
     /// </summary>
-    public string ParentId { get; set; }
+    string ParentId { get; set; }
   }
 }
\ No newline at end of file
diff --git a/zero.Core/Entities/Media/MediaListItem.cs b/zero.Core/Entities/Media/MediaListItem.cs
new file mode 100644
index 00000000..3c7c1ce6
--- /dev/null
+++ b/zero.Core/Entities/Media/MediaListItem.cs
@@ -0,0 +1,25 @@
+using System;
+using zero.Core.Attributes;
+
+namespace zero.Core.Entities
+{
+  /// <inheritdoc />
+  public class MediaListItem : IZeroIdEntity, IAppAwareEntity, IZeroDbConventions
+  {
+    public string Id { get; set; }
+
+    public string ParentId { get; set; }
+
+    public string AppId { get; set; }
+
+    public string Name { get; set; }
+
+    public DateTimeOffset CreatedDate { get; set; }
+
+    public bool IsFolder { get; set; }
+
+    public string Image { get; set; }
+
+    public long Size { get; set; }
+  }
+}
diff --git a/zero.Core/Entities/Media/MediaListQuery.cs b/zero.Core/Entities/Media/MediaListQuery.cs
index cc842ece..a1da7aa5 100644
--- a/zero.Core/Entities/Media/MediaListQuery.cs
+++ b/zero.Core/Entities/Media/MediaListQuery.cs
@@ -1,6 +1,12 @@
 namespace zero.Core.Entities
 {
-  public class MediaListQuery : ListQuery<Media>
+  public class MediaListQuery : ListQuery<IMedia>
+  {
+    public string FolderId { get; set; }
+  }
+
+
+  public class MediaListItemQuery : ListQuery<MediaListItem>
   {
     public string FolderId { get; set; }
   }
diff --git a/zero.Core/Validation/MediaFolderValidator.cs b/zero.Core/Validation/MediaFolderValidator.cs
index a9528b86..3d0bedac 100644
--- a/zero.Core/Validation/MediaFolderValidator.cs
+++ b/zero.Core/Validation/MediaFolderValidator.cs
@@ -3,7 +3,7 @@ using zero.Core.Entities;
 
 namespace zero.Core.Validation
 {
-  public class MediaFolderValidator : AbstractValidator<MediaFolder>
+  public class MediaFolderValidator : AbstractValidator<IMediaFolder>
   {
     public MediaFolderValidator()
     {
diff --git a/zero.Web.UI/App/components/datagrid/datagrid.vue b/zero.Web.UI/App/components/datagrid/datagrid.vue
index a11294a4..e404a647 100644
--- a/zero.Web.UI/App/components/datagrid/datagrid.vue
+++ b/zero.Web.UI/App/components/datagrid/datagrid.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ui-datagrid-outer">
     <div class="ui-datagrid">
-      <div class="ui-datagrid-items" :style="'grid-template-columns: repeat(auto-fill, minmax(' + configuration.width + 'px, 1fr))'">
+      <div class="ui-datagrid-items" :style="'grid-template-columns: repeat(auto-fill, minmax(' + configuration.width + 'px, 1fr))'" :class="{'is-block': configuration.block }">
         <component v-for="(item, index) in items" :is="configuration.component" :key="index" :value="item" class="ui-datagrid-cell"></component>
       </div>
 
@@ -43,7 +43,9 @@
     // scroll to top on page change
     scrollToTop: true,
     // promise which returns items based on the current filter and sorting
-    items: null
+    items: null,
+    // for block items
+    block: false
   };
 
   export default {
@@ -63,6 +65,7 @@
     components: { UiPagination },
 
     watch: {
+      '$route': 'load',
       'value.search': function (val)
       {
         this.filter.search = val;
@@ -184,6 +187,11 @@
     gap: var(--padding);
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     align-items: stretch;
+
+    &.is-block
+    {
+      display: block;
+    }
   }
 
   .ui-datagrid-empty, .ui-datagrid-loading
diff --git a/zero.Web.UI/App/pages/media/folder.vue b/zero.Web.UI/App/pages/media/folder.vue
index 6525ebd0..ecda15b6 100644
--- a/zero.Web.UI/App/pages/media/folder.vue
+++ b/zero.Web.UI/App/pages/media/folder.vue
@@ -38,7 +38,7 @@
         form.load(!this.model.id ? MediaFolderApi.getEmpty() : MediaFolderApi.getById(this.model.id)).then(response =>
         {
           this.disabled = false; //!response.canEdit;
-          this.item = response;
+          this.item = response.entity;
           this.item.parentId = this.model.parentId;
           this.loading = false;
         });
diff --git a/zero.Web.UI/App/pages/media/media-item-old.vue b/zero.Web.UI/App/pages/media/media-item-old.vue
new file mode 100644
index 00000000..e0b904bd
--- /dev/null
+++ b/zero.Web.UI/App/pages/media/media-item-old.vue
@@ -0,0 +1,41 @@
+<template>
+  <router-link :to="link" class="media-item">
+    <img v-if="value.type === 'image'" :src="value.source" />
+    <span class="media-item-content is-file" v-if="value.type !== 'image'">
+      <i :class="icons[value.type]" :data-extension="value.source.split('.').pop()"></i>
+      <span>{{value.name}}</span>
+    </span>
+  </router-link>
+</template>
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: Object,
+        default: () => { }
+      }
+    },
+
+    data: () => ({
+      icons: {
+        image: 'fth-image',
+        video: 'fth-video',
+        file: 'fth-file'
+      }
+    }),
+
+    computed: {
+      link()
+      {
+        return {
+          name: 'mediaitem',
+          params: { id: this.value.id }
+        };
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+</style>
diff --git a/zero.Web.UI/App/pages/media/media-item.vue b/zero.Web.UI/App/pages/media/media-item.vue
index e0b904bd..ee51a47c 100644
--- a/zero.Web.UI/App/pages/media/media-item.vue
+++ b/zero.Web.UI/App/pages/media/media-item.vue
@@ -1,10 +1,11 @@
 <template>
   <router-link :to="link" class="media-item">
-    <img v-if="value.type === 'image'" :src="value.source" />
-    <span class="media-item-content is-file" v-if="value.type !== 'image'">
-      <i :class="icons[value.type]" :data-extension="value.source.split('.').pop()"></i>
-      <span>{{value.name}}</span>
-    </span>
+    <img class="media-item-image" v-if="value.image" :src="value.image" />
+    <span class="media-item-icon" v-if="!value.image"><i :class="value.isFolder ? 'fth-folder' : 'fth-file'"></i></span>
+    <p class="media-item-text">
+      <span :title="value.name">{{value.name}}</span>
+      <span class="-minor" v-if="value.size"><br><span v-filesize="value.size"></span></span>
+    </p>
   </router-link>
 </template>
 
@@ -18,18 +19,14 @@
     },
 
     data: () => ({
-      icons: {
-        image: 'fth-image',
-        video: 'fth-video',
-        file: 'fth-file'
-      }
+      
     }),
 
     computed: {
       link()
       {
         return {
-          name: 'mediaitem',
+          name: this.value.isFolder ? 'mediafolder' : 'mediaitem',
           params: { id: this.value.id }
         };
       }
@@ -38,4 +35,48 @@
 </script>
 
 <style lang="scss">
+  $media-item-size: 80px;
+
+  .media-item
+  {
+    width: 100%;
+    min-height: $media-item-size;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 16px;
+    align-items: center;
+    line-height: 1.4;
+    color: var(--color-fg);
+    font-size: var(--font-size);
+  }
+
+  .media-item-image,
+  .media-item-icon
+  {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: $media-item-size;
+    width: $media-item-size;
+    object-fit: cover;
+    background: var(--color-bg-bright);
+    border-radius: var(--radius);
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .media-item-text
+  {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+
+    .-minor
+    {
+      color: var(--color-fg-dim-two);
+    }
+  }
 </style>
diff --git a/zero.Web.UI/App/pages/media/media.vue b/zero.Web.UI/App/pages/media/media.vue
index 7275ca97..5439efb1 100644
--- a/zero.Web.UI/App/pages/media/media.vue
+++ b/zero.Web.UI/App/pages/media/media.vue
@@ -1,20 +1,5 @@
 <template>
   <div class="media">
-    <div class="app-tree media-tree" v-resizable="resizable">
-      <ui-tree ref="tree" :get="getTree" :config="treeConfig" :active="id" header="@media.list">
-        <template v-slot:actions="props">
-          <ui-dropdown-button v-if="props.item && props.item.id === 'recyclebin'" :value="props.item" label="Empty recycle bin" icon="fth-trash-2" />
-          <template v-if="!props.item || props.item.id !== 'recyclebin'">
-            <ui-dropdown-button label="Create" icon="fth-plus" @click="addFolder(props.item)" />
-            <ui-dropdown-button v-if="props.item" label="Move" icon="fth-corner-down-right" @click="move(props.item)" />
-            <ui-dropdown-separator v-if="props.item" />
-            <ui-dropdown-button v-if="props.item" label="Delete" icon="fth-trash" @click="remove(props.item)" />
-          </template>
-        </template>
-      </ui-tree>
-      <div class="app-tree-resizable ui-resizable"></div>
-    </div>
-
     <router-view v-if="!isOverview"></router-view>
 
     <div v-if="isOverview" class="media-content">
@@ -29,26 +14,7 @@
 
       <div class="ui-view-box">
         <div class="media-items">
-
-          <!-- upload field -->
-          <!--<div v-if="id" class="media-item is-blank">
-            <input class="media-item-upload" type="file" multiple @change="onUpload" />
-            <span class="media-item-content">
-              <i class="fth-plus"></i>
-            </span>
-          </div>-->
-
-          <!-- folder list -->
-          <div v-if="!id" class="ui-datagrid-items">
-            <router-link :to="getLink(item)" class="media-item is-folder" v-for="item in folders" :key="item.id">
-              <span class="media-item-content is-folder">
-                <i class="fth-folder"></i>
-                <span>{{item.name}}</span>
-              </span>
-            </router-link>
-          </div>
-
-          <ui-datagrid v-if="id" ref="grid" v-model="gridConfig" />
+          <ui-datagrid ref="grid" v-model="gridConfig" />
         </div>
       </div>
     </div>
@@ -58,35 +24,18 @@
 
 <script>
   import MediaApi from 'zero/resources/media.js'
-  import MediaFolderApi from 'zero/resources/media-folder.js'
   import Overlay from 'zero/services/overlay.js';
   import AddFolderOverlay from './folder';
   import MediaItemOverlay from './media-overlay-item';
   import MediaItem from './media-item';
   import UploadStatusOverlay from './upload-status';
-  import Strings from 'zero/services/strings.js';
   import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
 
   export default {
 
     data: () => ({
-      cache: {},
       items: [],
-      folders: [],
-      treeConfig: {},
-      current: null,
-      icons: {
-        image: 'fth-image',
-        video: 'fth-video',
-        file: 'fth-file'
-      },
-      resizable: {
-        axis: 'x',
-        min: 260,
-        max: 520,
-        save: 'media-tree',
-        handle: '.ui-resizable'
-      }
+      current: null
     }),
 
     created()
@@ -95,7 +44,7 @@
 
       this.gridConfig = {
         search: null,
-        width: 160,
+        width: 280,
         component: MediaItem,
         items: this.getItems
       };
@@ -106,26 +55,6 @@
       }
     },
 
-    watch: {
-      '$route'()
-      {
-        this.cache = {};
-
-        if (!this.id)
-        {
-          this.getItems();
-        }
-        else if (this.isOverview)
-        {
-          this.$nextTick(() =>
-          {
-            this.$refs.grid.load();
-          });
-        }
-        //this.getItems();
-      }
-    },
-
     computed: {
       id()
       {
@@ -153,54 +82,14 @@
 
         query.folderId = this.$route.params.id;
 
-        return MediaApi.getAll(query).then(response =>
+        return MediaApi.getListByQuery(query).then(response =>
         {
           this.items = response.items;
-          this.folders = response.folders;
-          this.current = response.folder;
-
           return Promise.resolve(response);
         });
       },
 
 
-      // get link for folder or media item
-      getLink(item, isMediaItem)
-      {
-        if (item.id === 'recyclebin')
-        {
-          return { name: 'mediarecyclebin' };
-        }
-
-        return {
-          name: 'mediafolder',
-          params: { id: item.id }
-        };
-      },
-
-
-      // load folders in tree
-      getTree(parent)
-      {
-        const key = !parent ? '__root' : parent;
-
-        if (this.cache[key])
-        {
-          return Promise.resolve(this.cache[key]);
-        }
-
-        return MediaFolderApi.getAllAsTree(parent, this.id).then(response =>
-        {
-          response.forEach(item =>
-          {
-            item.url = this.getLink(item);
-          });
-          this.cache[key] = response;
-          return response;
-        });
-      },
-
-
       // adds a new folder
       addFolder(parentId)
       {
@@ -210,11 +99,7 @@
           theme: 'dark'
         }).then(item =>
         {
-          setTimeout(() =>
-          {
-            this.$refs.tree.refresh();
-            this.$router.push({ name: 'mediafolder', params: { id: item.model.id } });
-          }, 500);
+          this.$router.push({ name: 'mediafolder', params: { id: item.model.id } });
         }, () => { });
       },
 
@@ -237,7 +122,6 @@
         return Overlay.open(options).then(value =>
         {
           console.info(value);
-          //this.onChange(value);
         }, () => { });
       },
 
@@ -271,10 +155,6 @@
     height: 100vh;
     background: var(--color-bg);
     overflow-y: auto;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 2px;
-    justify-content: stretch;
   }
 
   .media-content
@@ -285,109 +165,7 @@
 
   .media-items .ui-datagrid-items
   {
-    /*display: grid;
-    flex-wrap: wrap;*/
-    gap: 15px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
-    align-items: stretch;
-  }
-
-  a.media-item, .media-item
-  {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--color-bg-bright);
-    height: 160px;
-    border-radius: var(--radius);
-    overflow: hidden;
-    color: var(--color-fg);
-    font-size: var(--font-size-xs);
-    position: relative;
-    padding: 10px;
-
-    img
-    {
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-      border-radius: var(--radius);
-    }
-
-    &.is-blank
-    {
-      border: 2px dotted var(--color-line);
-      background: transparent;
-    }
-
-    &.is-folder
-    {
-      background: var(--color-bg-bright);
-    }
-
-    &.is-folder, &.is-blank
-    {
-      flex: 0 1 auto;
-    }
-  }
-
-  .media-item-content
-  {
-    display: grid;
-    width: 100%;
-    grid-template-rows: 1fr auto;
-    text-align: center;
-    height: 100%;
-  
-    /*&.is-folder, &.is-file
-    {
-      box-shadow: var(--color-shadow-short);
-    }*/
-
-    i
-    {
-      display: flex;
-      width: 100%;
-      align-items: center;
-      justify-content: center;
-      font-size: 28px;
-      position: relative;
-
-      &:after
-      {
-        font-family: var(--font);
-        content: attr(data-extension);
-        font-size: 12px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        margin-top: 25px;
-        background: var(--color-bg);
-        display: inline-block;
-        padding: 4px 8px;
-        border-radius: 3px;
-        font-weight: 600;
-        transform: translateX(-50%);
-      }
-    }
-
-    .is-blank & i:after,
-    &.is-folder i:after
-    {
-      display: none;
-    }
-
-    span
-    {
-      display: block;
-      /*border-top: 1px solid var(--color-line);*/
-      padding: 10px 20px 12px;
-    }
-
-    &.is-folder span
-    {
-      font-weight: bold;
-    }
+    gap: 16px var(--padding);
   }
 
   input[type="file"].media-item-upload
diff --git a/zero.Web.UI/App/resources/media.js b/zero.Web.UI/App/resources/media.js
index 752d5254..5745c9f1 100644
--- a/zero.Web.UI/App/resources/media.js
+++ b/zero.Web.UI/App/resources/media.js
@@ -28,6 +28,12 @@ export default {
     return Axios.get(base + 'getAll', { params: query }).then(res => Promise.resolve(res.data));
   },
 
+  // get all media items (including folders)
+  getListByQuery(query)
+  {
+    return Axios.get(base + 'getListByQuery', { params: query }).then(res => Promise.resolve(res.data));
+  },
+
   // get path to thumbnail source
   getImageSource(id)
   {
diff --git a/zero.Web/Controllers/MediaController.cs b/zero.Web/Controllers/MediaController.cs
index c85b2268..ba9142dd 100644
--- a/zero.Web/Controllers/MediaController.cs
+++ b/zero.Web/Controllers/MediaController.cs
@@ -4,12 +4,10 @@ using Microsoft.AspNetCore.StaticFiles;
 using System;
 using System.Collections.Generic;
 using System.IO;
-using System.Linq;
 using System.Threading.Tasks;
 using zero.Core.Api;
 using zero.Core.Entities;
 using zero.Core.Identity;
-using zero.Core.Options;
 using zero.Web.Models;
 
 namespace zero.Web.Controllers
@@ -18,51 +16,47 @@ namespace zero.Web.Controllers
   public class MediaController : BackofficeController
   {
     IMediaApi Api;
-
     IMediaFolderApi MediaFolderApi;
 
-    IMediaUploadApi MediaUploadApi;
 
-
-    public MediaController(IMediaApi api, IMediaFolderApi mediaFolderApi, IMediaUploadApi mediaUploadApi)
+    public MediaController(IMediaApi api, IMediaFolderApi mediaFolderApi)
     {
       Api = api;
       MediaFolderApi = mediaFolderApi;
-      MediaUploadApi = mediaUploadApi;
     }
 
-
-    /// <summary>
-    /// Get media item by id
-    /// </summary>  
-    public async Task<IActionResult> GetById([FromQuery] string id)
-    {
-      return Edit(await Api.GetById(id));
-    }
+  
+    public async Task<IActionResult> GetById([FromQuery] string id) => Edit(await Api.GetById(id));
 
 
-    /// <summary>
-    /// Get media item by id
-    /// </summary>  
-    public async Task<IActionResult> GetByIds([FromQuery] string[] ids)
-    {
-      return Json(await Api.GetById(ids));
-    }
+    public async Task<IActionResult> GetByIds([FromQuery] string[] ids) => Json(await Api.GetById(ids));
+
+
+    public async Task<IActionResult> GetListByQuery([FromQuery] MediaListItemQuery query) => Json(await Api.GetListByQuery(query));
+
+
+    public async Task<IActionResult> Save([FromBody] IMedia model) => Json(await Api.Save(model));
+
+
+    public async Task<IActionResult> Upload(IFormFile file, string folderId) => Json(await Api.Save(await Api.Upload(file, folderId)));
+
+
+    public async Task<IActionResult> UploadTemporary(IFormFile file, string folderId) => Json(await Api.Upload(file, folderId));
+
+
+    public async Task<IActionResult> Delete([FromQuery] string id) => Json(await Api.Delete(id));
 
 
-    /// <summary>
-    /// Get all media items + folders
-    /// </summary>    
     public async Task<IActionResult> GetAll([FromQuery] MediaListQuery query)
     {
-      ListResult<MediaListModel> items = await Mapper.Map<Media, MediaListModel>(await Api.GetByQuery(query));
-      IList<MediaFolder> hierarchy = null;
-      IEnumerable<MediaListModel> folders = new List<MediaListModel>();
-      MediaFolder folder = null;
+      ListResult<MediaListModel> items = await Mapper.Map<IMedia, MediaListModel>(await Api.GetByQuery(query));
+      IList<IMediaFolder> hierarchy = null;
+      IEnumerable<IMediaFolder> folders = new List<IMediaFolder>();
+      IMediaFolder folder = null;
 
       if (query.Page < 2)
       {
-        folders = await Mapper.Map<MediaFolder, MediaListModel>(await MediaFolderApi.GetAll(query.FolderId));
+        folders = await MediaFolderApi.GetAll(query.FolderId);
       }
 
       if (!String.IsNullOrEmpty(query.FolderId))
@@ -71,51 +65,10 @@ namespace zero.Web.Controllers
         hierarchy = await MediaFolderApi.GetHierarchy(query.FolderId);
       }   
 
-      return Json(new MediaListResultModel(items, folders, folder, hierarchy));
+      return Json(new MediaListResultModel(items, null, folder, hierarchy));
     }
 
 
-    /// <summary>
-    /// Save a media item
-    /// </summary>
-    public async Task<IActionResult> Save([FromBody] Media model)
-    {
-      return Json(await Api.Save(model));
-    }
-
-
-    /// <summary>
-    /// Upload a file
-    /// </summary>
-    public async Task<IActionResult> Upload(IFormFile file, string folderId)
-    {
-      Media media = await MediaUploadApi.Upload(file, folderId);
-      return Json(await Api.Save(media));
-    }
-
-
-    /// <summary>
-    /// Upload a file
-    /// </summary>
-    public async Task<IActionResult> UploadTemporary(IFormFile file, string folderId)
-    {
-      Media media = await MediaUploadApi.Upload(file, folderId);
-      return Json(media);
-    }
-
-
-    /// <summary>
-    /// Deletes a media item
-    /// </summary>
-    public async Task<IActionResult> Delete([FromQuery] string id)
-    {
-      return await As<Media, MediaEditModel>(await Api.Delete(id));
-    }
-
-
-    /// <summary>
-    /// Streams a media thumbnail by id
-    /// </summary>
     [HttpGet]
     public async Task<IActionResult> StreamThumbnail(string id)
     {
diff --git a/zero.Web/Controllers/MediaFolderController.cs b/zero.Web/Controllers/MediaFolderController.cs
index dfd92555..f3526602 100644
--- a/zero.Web/Controllers/MediaFolderController.cs
+++ b/zero.Web/Controllers/MediaFolderController.cs
@@ -1,11 +1,8 @@
 using Microsoft.AspNetCore.Mvc;
-using System.Collections.Generic;
 using System.Threading.Tasks;
 using zero.Core.Api;
 using zero.Core.Entities;
 using zero.Core.Identity;
-using zero.Core.Options;
-using zero.Web.Models;
 
 namespace zero.Web.Controllers
 {
@@ -20,49 +17,18 @@ namespace zero.Web.Controllers
     }
 
 
-    /// <summary>
-    /// Get media folder by id
-    /// </summary>  
-    public async Task<IActionResult> GetById([FromQuery] string id)
-    {
-      return await As<MediaFolder, MediaFolderEditModel>(await Api.GetById(id));
-    }
+    public async Task<IActionResult> GetById([FromQuery] string id) => Edit(await Api.GetById(id));
 
 
-    /// <summary>
-    /// Get empty media folder model
-    /// </summary>  
-    public IActionResult GetEmpty()
-    {
-      return Json(new MediaFolderEditModel());
-    }
+    public IActionResult GetEmpty([FromServices] IMediaFolder blueprint) => Edit(blueprint);
+
+ 
+    public async Task<IActionResult> GetAllAsTree([FromQuery] string parent = null, [FromQuery] string active = null) => Json(await Api.GetAllAsTree(parent, active));
 
 
-    /// <summary>
-    /// Get all folders with a specific parent as tree
-    /// </summary>    
-    public async Task<IActionResult> GetAllAsTree([FromQuery] string parent = null, [FromQuery] string active = null)
-    {
-      return Json(await Api.GetAllAsTree(parent, active));
-    }
+    public async Task<IActionResult> Save([FromBody] IMediaFolder model) => Json(await Api.Save(model));
 
 
-    /// <summary>
-    /// Save a media item
-    /// </summary>
-    public async Task<IActionResult> Save([FromBody] MediaFolderEditModel model)
-    {
-      MediaFolder entity = await Mapper.Map(model, await Api.GetById(model.Id));
-      return await As<MediaFolder, MediaFolderEditModel>(await Api.Save(entity));
-    }
-
-
-    /// <summary>
-    /// Deletes a media item
-    /// </summary>
-    public async Task<IActionResult> Delete([FromQuery] string id)
-    {
-      return await As<MediaFolder, MediaFolderEditModel>(await Api.Delete(id));
-    }
+    public async Task<IActionResult> Delete([FromQuery] string id) => Json(await Api.Delete(id));
   }
 }
diff --git a/zero.Web/Defaults/ZeroBackofficePlugin.cs b/zero.Web/Defaults/ZeroBackofficePlugin.cs
index 8407b14a..e40a173b 100644
--- a/zero.Web/Defaults/ZeroBackofficePlugin.cs
+++ b/zero.Web/Defaults/ZeroBackofficePlugin.cs
@@ -24,6 +24,8 @@ namespace zero.Web.Defaults
       services.AddTransient<ITranslation, Translation>();
       services.AddTransient<IPage, Page>();
       services.AddTransient<IRecycledEntity, RecycledEntity>();
+      services.AddTransient<IMedia, Media>();
+      services.AddTransient<IMediaFolder, MediaFolder>();
 
 
       services.AddTransient<IApplicationsApi, ApplicationsApi>();
@@ -45,7 +47,6 @@ namespace zero.Web.Defaults
       services.AddTransient<IRevisionsApi, RevisionsApi>();
       services.AddTransient<IMediaApi, MediaApi>();
       services.AddTransient<IMediaFolderApi, MediaFolderApi>();
-      services.AddTransient<IMediaUploadApi, MediaUploadApi>();
       services.AddTransient<IModulesApi, ModulesApi>();
       services.AddTransient<IRecycleBinApi, RecycleBinApi>();
     }
diff --git a/zero.Web/Models/MediaListResultModel.cs b/zero.Web/Models/MediaListResultModel.cs
index 639a53e3..7492faf8 100644
--- a/zero.Web/Models/MediaListResultModel.cs
+++ b/zero.Web/Models/MediaListResultModel.cs
@@ -7,9 +7,9 @@ namespace zero.Web.Models
   {
     public IEnumerable<MediaListModel> Folders { get; private set; }
 
-    public IEnumerable<MediaFolder> FolderHierarchy { get; private set; }
+    public IEnumerable<IMediaFolder> FolderHierarchy { get; private set; }
 
-    public MediaFolder Folder { get; private set; }
+    public IMediaFolder Folder { get; private set; }
 
     public MediaListResultModel(ListResult<MediaListModel> items, IEnumerable<MediaListModel> folders) : base(items.Items, items.TotalItems, items.Page, items.PageSize)
     {
@@ -17,7 +17,7 @@ namespace zero.Web.Models
       Statistics = items.Statistics;
     }
 
-    public MediaListResultModel(ListResult<MediaListModel> items, IEnumerable<MediaListModel> folders, MediaFolder currentFolder, IEnumerable<MediaFolder> hierarchy) : this(items, folders)
+    public MediaListResultModel(ListResult<MediaListModel> items, IEnumerable<MediaListModel> folders, IMediaFolder currentFolder, IEnumerable<IMediaFolder> hierarchy) : this(items, folders)
     {
       Folder = currentFolder;
       FolderHierarchy = hierarchy;