Skip to content

Media Picker: Implement paging #20202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndyButland merged 21 commits into from
Sep 26, 2025
Merged

Media Picker: Implement paging #20202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
380fdb0
Avoid throwing an exception on getting references when migrating cont…
AndyButland Sep 4, 2025
fd6f55d
Merge branch 'v13/dev' into v13/bugfix/avoid-exception-on-get-referen…
kjac Sep 16, 2025
8f9e036
Revert and handle exception at the consumer side
kjac Sep 16, 2025
b8d9b4b
Clean up
kjac Sep 16, 2025
4d86734
Fix issue 12364
landlogicit Sep 16, 2025
eae26d7
Revert "Fix issue 12364"
landlogicit Sep 19, 2025
dae8d8c
Media Picker: use getPagedChildren with paging & sorting
landlogicit Sep 19, 2025
c8a3187
Merge branch 'v13/dev' into fix-issue-12364
landlogicit Sep 19, 2025
5fce87d
Update mediapicker.controller.js
landlogicit Sep 19, 2025
86496c7
Merge branch 'fix-issue-12364' of https://github.com/landlogicit/Umbr…
landlogicit Sep 19, 2025
c0add5e
Update mediapicker.controller.js
landlogicit Sep 19, 2025
c5ca264
Update mediapicker.controller.js
landlogicit Sep 19, 2025
039b383
Update mediapicker.controller.js
landlogicit Sep 19, 2025
a8894b5
Merge branch 'v13/dev' into fix-issue-12364
landlogicit Sep 20, 2025
a03170e
Merge branch 'v13/dev' into fix-issue-12364
landlogicit Sep 20, 2025
8c34b24
Merge branch 'v13/dev' into fix-issue-12364
landlogicit Sep 22, 2025
f3c8b4e
Merge branch 'v13/dev' into fix-issue-12364
landlogicit Sep 23, 2025
efb9fd7
Fix default values for paging.
AndyButland Sep 24, 2025
6a8abe0
Refactor Media Picker controller: simplify pagination and clarify com…
landlogicit Sep 25, 2025
10c1d81
Media Picker: fix lost paging on reopen by chaining navigation promises
landlogicit Sep 25, 2025
7cd7568
Tidied up indentation.
AndyButland Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/Umbraco.Web.UI.Client/src/common/resources/entity.resource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,10 +514,9 @@ function entityResource($q, $http, umbRequestHelper) {
*
*/
getPagedChildren: function (parentId, type, options) {

var defaults = {
pageSize: 1,
pageNumber: 100,
pageSize: 100,
pageNumber: 1,
filter: '',
orderDirection: "Ascending",
orderBy: "SortOrder",
Expand Down
116 changes: 70 additions & 46 deletions ...raco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,28 +130,24 @@ angular.module("umbraco")
}
}


function onInit() {


localizationService.localizeMany(["defaultdialogs_selectMedia", "mediaPicker_tabClipboard"])
.then(function (localizationResult) {
setTitle(localizationResult);
setNavigation(localizationResult);
});


userService.getCurrentUser().then(function (userData) {
userStartNodes = userData.startMediaIds;

if ($scope.startNodeId !== -1) {
entityResource.getById($scope.startNodeId, "media")
.then(function (ent) {
$scope.startNodeId = ent.id;
run();
return run();
});
} else {
run();
return run();
}
});
}
Expand All @@ -160,10 +156,11 @@ angular.module("umbraco")
//default root item
if (!$scope.target) {
if ($scope.lastOpenedNode && $scope.lastOpenedNode !== -1) {
entityResource.getById($scope.lastOpenedNode, "media")
.then(ensureWithinStartNode, gotoStartNode);
return entityResource.getById($scope.lastOpenedNode, "media")
.then(ensureWithinStartNode)
.catch(function () { return gotoStartNode(); });
} else {
gotoStartNode();
return gotoStartNode();
}
} else {
// if a target is specified, go look it up - generally this target will just contain ids not the actual full
Expand All @@ -176,11 +173,11 @@ angular.module("umbraco")
// ID of a UDI or legacy int ID still could be null/undefinied here
// As user may dragged in an image that has not been saved to media section yet
if (id) {
entityResource.getById(id, "Media")
return entityResource.getById(id, "Media")
.then(function (node) {
$scope.target = node;
// Moving directly to existing node's folder
gotoFolder({ id: node.parentId }).then(function () {
// Move directly to existing node's folder, then open details
return gotoFolder({ id: node.parentId }).then(function () {
selectMedia(node);
$scope.target.url = mediaHelper.resolveFileFromEntity(node);
$scope.target.thumbnail = mediaHelper.resolveFileFromEntity(node, true);
Expand All @@ -195,6 +192,7 @@ angular.module("umbraco")
// No ID set - then this is going to be a tmpimg that has not been uploaded
// User editing this will want to be changing the ALT text
openDetailsDialog();
return;
}
}
}
Expand Down Expand Up @@ -257,22 +255,27 @@ angular.module("umbraco")
folder = { id: -1, name: "Media", icon: "icon-folder" };
}

if (folder.id > 0) {
entityResource.getAncestors(folder.id, "media", null, { dataTypeKey: dataTypeKey })
.then(function (anc) {
$scope.path = _.filter(anc,
function (f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
folder.path = $scope.path[0].path;
performGotoFolder(folder);
});
} else {
$scope.path = [];
performGotoFolder(folder);
}
var setPathPromise = (folder.id > 0)
? entityResource.getAncestors(folder.id, "media", null, { dataTypeKey: dataTypeKey })
.then(function (anc) {
$scope.path = _.filter(anc, function (f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
folder.path = $scope.path[0].path;
})
: Promise.resolve().then(function () {
$scope.path = [];
});

return getChildren(folder.id);
// Chain: resolve path → set current folder → reset paging → fetch page
return setPathPromise.then(function () {
performGotoFolder(folder);
// Reset pagination to the first page on folder change
vm.searchOptions.pageNumber = 1;
vm.searchOptions.totalItems = 0;
vm.searchOptions.totalPages = 0;
return getChildren(folder.id);
});
}

function performGotoFolder(folder) {
Expand Down Expand Up @@ -388,11 +391,9 @@ angular.module("umbraco")

// also make sure the node is not trashed
if (nodePath.indexOf($scope.startNodeId.toString()) !== -1 && node.trashed === false) {
gotoFolder({ id: $scope.lastOpenedNode || $scope.startNodeId, name: "Media", icon: "icon-folder", path: node.path });
return true;
return gotoFolder({ id: $scope.lastOpenedNode || $scope.startNodeId, name: "Media", icon: "icon-folder", path: node.path });
} else {
gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
return false;
return gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}
}

Expand All @@ -408,7 +409,7 @@ angular.module("umbraco")
}

function gotoStartNode() {
gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
return gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}

function openDetailsDialog() {
Expand Down Expand Up @@ -484,8 +485,15 @@ angular.module("umbraco")
function changePagination(pageNumber) {
vm.loading = true;
vm.searchOptions.pageNumber = pageNumber;
searchMedia();
};

if (vm.searchOptions.filter) {
// search pagination (already present)
searchMedia();
} else {
// pagination in folder view
getChildren($scope.currentFolder.id);
}
}

function searchMedia() {
vm.loading = true;
Expand Down Expand Up @@ -559,22 +567,38 @@ angular.module("umbraco")

function getChildren(id) {
vm.loading = true;
return entityResource.getChildren(id, "Media", vm.searchOptions).then(function (data) {
return entityResource
.getPagedChildren(id, "Media", vm.searchOptions)
.then(handlePagedChildren)
.finally(function () { vm.loading = false; });
}

var allowedTypes = dialogOptions.filter ? dialogOptions.filter.split(",") : null;
function handlePagedChildren(data) {
var items = transformItems(data && data.items ? data.items : [], getAllowedTypes());
$scope.images = items;
syncPagination(vm.searchOptions, data);
vm.searchOptions.filter = ""; // reset filter to ensure folder navigation always starts unfiltered
preSelectMedia();
}

for (var i = 0; i < data.length; i++) {
setDefaultData(data[i]);
data[i].filtered = allowedTypes && allowedTypes.indexOf(data[i].metaData.ContentTypeAlias) < 0;
}
function getAllowedTypes() {
return dialogOptions.filter ? dialogOptions.filter.split(",") : null;
}

vm.searchOptions.filter = "";
$scope.images = data ? data : [];
function transformItems(items, allowedTypes) {
for (var i = 0; i < items.length; i++) {
setDefaultData(items[i]);
items[i].filtered = !!(allowedTypes && allowedTypes.indexOf(items[i].metaData.ContentTypeAlias) < 0);
}
return items;
}

// set already selected medias to selected
preSelectMedia();
vm.loading = false;
});
function syncPagination(opts, data) {
var d = data || {};
opts.pageNumber = d.pageNumber;
opts.pageSize = d.pageSize;
opts.totalItems = d.totalItems;
opts.totalPages = d.totalPages;
}

function setDefaultData(item) {
Expand Down
Loading