Media Picker is slow when you have a large number of images at the root folder

[Nashuim]

Which exact Umbraco version are you using? For example: 9.0.1 - don't just write v9

9.5

Bug summary

When you have lots of images at the root folder (>1000) the media picker can take a very long time to load them and can actually freeze the browser when rendering them.

Specifics

No response

Steps to reproduce

1. Add 1000 images to the root folder
2. Use the media picker to select an image

Expected result / actual result

I think this should be paginated by default. I can see that it's already paginated when you use the search function but not at the first load.

[nzdev]

Would be good for someone to revive this pr. #9909

[github-actions]

Hi @Nashuim,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post.

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[Zeegaan]

Helle 👋 Sorry for the late answer, I've marked this up for grabs for now, as we're implementing a new backoffice in V14, and the plan is to have everything paged (at least from the backend), so it should eventually solve this issue 👍

[landlogicit]

Hi, thanks for the update! Unfortunately, the issue still persists in version 10.x, which is currently being used. While the new implementation in V14 sounds promising, we would appreciate any interim solutions or workarounds that can be applied to the 10.x version. Thank you!

[landlogicit]

I've identified and implemented a custom solution to address the slowness of the Media Picker when dealing with a large number of images in the root folder. The solution involves creating a custom controller that inherits from EntityController and adding a custom method that optimizes the retrieval of media items.

Custom Controller and Method
I created a custom controller named FiltriEntityController that inherits from EntityController and added a method named GetChildrenCustom. This method is designed to limit the number of media items returned, thereby reducing the load on the Media Picker.

Here's the full implementation of the custom controller and method:

`
[PluginController("Filtri")]
public class FiltriEntityController : EntityController
{
private readonly IEntityService _entityService;
private readonly IUmbracoMapper _umbracoMapper;
private readonly IBackOfficeSecurityAccessor _backofficeSecurityAccessor;
private readonly AppCaches _appCaches;
private readonly IDataTypeService _dataTypeService;

public FiltriEntityController(ITreeService treeService, UmbracoTreeSearcher treeSearcher, SearchableTreeCollection searchableTreeCollection,
    IPublishedContentQuery publishedContentQuery, IShortStringHelper shortStringHelper, IEntityService entityService, 
    IBackOfficeSecurityAccessor backofficeSecurityAccessor, IPublishedUrlProvider publishedUrlProvider, IContentService contentService, 
    IUmbracoMapper umbracoMapper, IDataTypeService dataTypeService, ISqlContext sqlContext, ILocalizedTextService localizedTextService, 
    IFileService fileService, IContentTypeService contentTypeService, IMediaTypeService mediaTypeService, IMacroService macroService, 
    IUserService userService, ILocalizationService localizationService, AppCaches appCaches) : 
    base(treeService, treeSearcher, searchableTreeCollection, publishedContentQuery, shortStringHelper, entityService, 
        backofficeSecurityAccessor, publishedUrlProvider, contentService, umbracoMapper, dataTypeService, sqlContext, 
        localizedTextService, fileService, contentTypeService, mediaTypeService, macroService, userService, localizationService, appCaches)
{
    _entityService = entityService;
    _umbracoMapper = umbracoMapper;
    _backofficeSecurityAccessor = backofficeSecurityAccessor;
    _appCaches = appCaches;
    _dataTypeService = dataTypeService; 
}

public IEnumerable<EntityBasic> GetChildrenCustom(int id, UmbracoEntityTypes type, Guid? dataTypeKey = null)
{
    UmbracoObjectTypes? objectType = ConvertToObjectType(type);
    if (objectType.HasValue)
    {
        var startNodes = GetStartNodes(type);
        var ignoreUserStartNodes = IsDataTypeIgnoringUserStartNodes(dataTypeKey);

        // Root is special: reduce it to start nodes if the user's start node is not the default
        if (id == Constants.System.Root && startNodes.Length > 0 &&
            !startNodes.Contains(Constants.System.Root) && !ignoreUserStartNodes)
        {
            IEntitySlim[] nodes = _entityService.GetAll(objectType.Value, startNodes).ToArray();
            if (nodes.Length == 0)
            {
                return Enumerable.Empty<EntityBasic>();
            }

            var pr = new List<EntityBasic>(nodes.Select(_umbracoMapper.Map<EntityBasic>).WhereNotNull());
            return pr;
        }

        // Proceed as usual
        var dati = _entityService.GetPagedChildren(id, objectType.Value, 0, 100, out _, null, Ordering.By("VersionDate", Direction.Descending));
        var dati2 = dati.Select(_umbracoMapper.Map<EntityBasic>).WhereNotNull();

        return dati2;
    }

    // Convert unknown types
    switch (type)
    {
        case UmbracoEntityTypes.Language:
        case UmbracoEntityTypes.User:
        case UmbracoEntityTypes.Macro:
        default:
            throw new NotSupportedException("The " + typeof(EntityController) + " does not currently support data for the type " + type);
    }
}

private int[] GetStartNodes(UmbracoEntityTypes type)
{
    switch (type)
    {
        case UmbracoEntityTypes.Document:
            return _backofficeSecurityAccessor.BackOfficeSecurity?.CurrentUser?.CalculateContentStartNodeIds(
                _entityService, _appCaches) ?? Array.Empty<int>();
        case UmbracoEntityTypes.Media:
            return _backofficeSecurityAccessor.BackOfficeSecurity?.CurrentUser?.CalculateMediaStartNodeIds(
                _entityService, _appCaches) ?? Array.Empty<int>();
        default:
            return Array.Empty<int>();
    }
}

private bool IsDataTypeIgnoringUserStartNodes(Guid? dataTypeKey) => dataTypeKey.HasValue &&
                                                                    _dataTypeService
                                                                        .IsDataTypeIgnoringUserStartNodes(
                                                                            dataTypeKey.Value);

private static UmbracoObjectTypes? ConvertToObjectType(UmbracoEntityTypes entityType)
{
    switch (entityType)
    {
        case UmbracoEntityTypes.Document:
            return UmbracoObjectTypes.Document;
        case UmbracoEntityTypes.Media:
            return UmbracoObjectTypes.Media;
        case UmbracoEntityTypes.MemberType:
            return UmbracoObjectTypes.MemberType;
        case UmbracoEntityTypes.MemberGroup:
            return UmbracoObjectTypes.MemberGroup;
        case UmbracoEntityTypes.MediaType:
            return UmbracoObjectTypes.MediaType;
        case UmbracoEntityTypes.DocumentType:
            return UmbracoObjectTypes.DocumentType;
        case UmbracoEntityTypes.Member:
            return UmbracoObjectTypes.Member;
        case UmbracoEntityTypes.DataType:
            return UmbracoObjectTypes.DataType;
        default:
            //There is no UmbracoEntity conversion (things like Macros, Users, etc...)
            return null;
    }
}

}

`
Explanation
In this custom method, I've replaced the return statement to ensure that only the first 100 media items are fetched. This is done using the GetPagedChildren method of _entityService, which retrieves children entities in a paginated manner. The entities are then mapped to EntityBasic objects and returned. This approach ensures that the Media Picker loads quickly by limiting the number of items it needs to process.

AngularJS API Interceptor
To integrate this custom method into the Umbraco backend, I used an AngularJS HTTP interceptor. This interceptor redirects requests from the default GetChildren method to our custom GetChildrenCustom method.

Here's the AngularJS configuration:
`
angular.module('umbraco.services').config([
'$httpProvider',
function ($httpProvider) {
$httpProvider.interceptors.push(function ($q) {
return {
'request': function (request) {
// Redirect any requests for the listview to our custom list view UI
if (request.url.indexOf("backoffice/umbracoapi/entity/GetChildren?id=") > -1) {
request.url = request.url.replace("backoffice/umbracoapi/entity/GetChildren", "backoffice/Filtri/FiltriEntity/GetChildrenCustom");
}

                return request || $q.when(request);
            }
        };
    });
}

]);

`
Summary
By creating a custom controller and method to handle media retrieval, and using an AngularJS interceptor to redirect requests, I've managed to significantly improve the performance of the Media Picker in scenarios where there are a large number of images in the root folder. This solution limits the number of items processed at a time, ensuring a smoother and faster user experience.

[jericyuen]

@Zeegaan Any update on this issue for V13?