Collection filtering in URL is a nightmare - what's the fix?

[ghh1111]

I know there is a work around for this - Payload 3+ is too advanced for this not to be true - but I haven't found it yet and am in critical mission timing. I just migrated from Wordpress. It's been an absolute nightmare to migrate. Has literally taken 2 weeks and have just given up on missing data, will have to manually re-create. Mind you I am not a coder and brand new to Payload. My current issue is that when I load a collection - Media or other - it shoves it all into the url and crashes everything. I love the filters - I'm coming from Wordpress Admin Colums Pro - I want an admin interface that lets me filter, see all my data, see only some of my data, etc. - but all of it in the url is madness. How do I stop that? It has crashed my browser 1000 times now. I know there is a smart way to do it - I just don't know what or how and not sure what to even search to learn more. Any advice much appreciated.

[ghh1111]

Also - it's the many many image sizes in the media library that are killing it in media - surely there is a way in maybe the media collection file to say please don't include all of these file sizes in the url? I literally can't load a pretty simple media library without it all crashing.

[ghh1111]

Sorry missed your question here -
Is the Size group generated by payload? Or did you make the group yourself? This would normally not show up. (https://payloadcms.com/docs/upload/overview#image-sizes)

Generated by payload, I haven't done anything to change that

[ghh1111]

Also what is the logic for this? It seems like insanity to put every filter in a url? I wouldn't want anyone to see any of that - ever

[ghh1111]

Thank you for the suggestions! I think there's a misunderstanding about the core issue I'm facing.
The problem isn't about hiding fields - I actually WANT all fields to be available for filtering and column selection. The issue is that Payload puts ALL selected columns into the URL as a massive encoded parameter, which causes:

Browser crashes when the URL exceeds ~2000-4000 characters
Server errors (414 Request-URI Too Large)
Complete inability to use the admin panel for collections with many fields

For the Media collection specifically:

Payload auto-generates ~42 fields for image sizes (thumbnail.url, thumbnail.width, thumbnail.height, thumbnail.mimeType, thumbnail.filesize, thumbnail.filename, square.url, square.width, etc.)
When I select even a few columns, the URL becomes massive and crashes
These size fields shouldn't even be available as columns - no one needs to see "thumbnail.mimeType" as a column in their media library

For collections with many fields (like my Training collection with 300 fields):

I need the flexibility to filter/view any field
But when I select columns or filters, Payload encodes ALL fields into the URL
This immediately crashes the browser/server

What I need:

Keep all fields available for filtering and column selection (full functionality)
Store view preferences in the database (which Payload already does via payload-preferences)
Stop syncing this state to the URL - there's no need for 3000+ character URLs

Is there a way to disable URL state persistence while keeping the column/filter UI fully functional? The "shareable view" feature via URL is causing a critical failure with real-world data schemas.
listSearchableFields and disableListFilter remove functionality I need. I just need Payload to stop putting massive column arrays in the URL. Is this possible?

[matthijs166]

Hey hey,

You can exclude fields from the admin filter with disableListFilter (https://payloadcms.com/docs/fields/overview#admin-options)

There is an option to store and share filter presets (https://payloadcms.com/docs/query-presets/overview)

Also you can try the defaultColumns option (https://payloadcms.com/docs/fields/join#admin-config-options)

And there is also a baseListFilter option to preFilter the items in the admin overview

Example:

const Events: CollectionConfig = {
  slug: 'events',
  admin: {
    defaultColumns: ['title', 'eventStart', 'eventEnd', 'type', 'location'],
    baseListFilter: async () => { // Return an Where object
      return {
        parent: {
          equals: null,
        }
      }
    }
  },
  .... (etc)

It's also good practise to check if you really need every value you're importing.
Is the Size group generated by payload? Or did you make the group yourself? This would normally not show up. (https://payloadcms.com/docs/upload/overview#image-sizes)

Maybe you can share the config of the media collection?

[ghh1111]

Thank you! I appreciate it! Happy to share media.ts
It seems like the issues are related but different - the media library shows every possible size in the columns - so every single possible size gets dumped into the url which crashes it every time - that just makes no sense to me :-) But I'm not a developer and very new to Payload (coming from Wordpress and trying to figure out is harder than I thought it would be!)
So for the media library, I'd never need every size as a column - I only want what I just put into my media collection

listSearchableFields: [ 'filename', 'alt', 'caption', 'folder', 'associatedCollection', 'tags', 'credit', 'mimeType', 'filesize', 'width', 'height', ],

I want to be able to see just those columns in the view, and have it persist in my user prefs. there will be other users - maybe they want to set it differently.

Then in collections it seems different - like I have one collection with 300 nested fields. I want to be able to select the ones I want to see in a given session like it's set up for by default right? Like I want to see which listings are missing a logo or whatever column which would be different then next time to see - xyz whatever column. I get that I can set the default columns in the admin section - basic name, etc. - but the collection with 300 fields - as soon as you select one filter - it puts all 300 in the url and it crashes - this is the part I just don't understand - I am fundamentally misunderstanding how this should work I'm sure -

Does that context help? :-)
Thanks so much for the reply - I'm totally stuck!

`// src/collections/Media.ts

import type { CollectionConfig } from 'payload'

import {
FixedToolbarFeature,
InlineToolbarFeature,
lexicalEditor,
} from '@payloadcms/richtext-lexical'
import path from 'path'
import { fileURLToPath } from 'url'

import { anyone } from '../access/anyone'
import { authenticated } from '../access/authenticated'

const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)

export const Media: CollectionConfig = {
slug: 'media',
defaultSort: 'filename', // Add at root level for A-Z sort
access: {
create: authenticated,
delete: authenticated,
read: anyone,
update: authenticated,
},
admin: {
useAsTitle: 'filename',
defaultColumns: ['filename', 'folder', 'associatedCollection', 'tags', 'alt', 'updatedAt'],
group: 'Media & Assets',
listSearchableFields: [
'filename',
'alt',
'caption',
'folder',
'associatedCollection',
'tags',
'credit',
'mimeType',
'filesize',
'width',
'height',
],
},
fields: [
{
name: 'alt',
type: 'text',
//required: true,
},
{
name: 'caption',
type: 'richText',
editor: lexicalEditor({
features: ({ rootFeatures }) => {
return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
},
}),
},
// ADD THESE NEW FIELDS:
{
name: 'filename',
type: 'text',
admin: {
description: 'Original filename',
readOnly: true,
},
hooks: {
beforeValidate: [
({ value, data }) => {
// Auto-populate from upload filename if available
if (!value && data?.filename) {
return data.filename
}
return value
},
],
},
},
{
name: 'folder',
type: 'select',
required: true,
defaultValue: 'general',
options: [
// Logos
{ label: 'Logos / Airports', value: 'logos-airports' },
{ label: 'Logos / Air Carriers', value: 'logos-air-carriers' },
{ label: 'Logos / Companies', value: 'logos-companies' },
{ label: 'Logos / FBOs', value: 'logos-fbos' },
{ label: 'Logos / MROs', value: 'logos-mros' },
{ label: 'Logos / Organizations', value: 'logos-organizations' },
{ label: 'Logos / Training', value: 'logos-training' },
{ label: 'Logos / Government', value: 'logos-government' },
{ label: 'Logos / Armed Forces', value: 'logos-armed-forces' },

    // Galleries
    { label: 'Galleries / Airports', value: 'galleries-airports' },
    { label: 'Galleries / General', value: 'galleries-general' },

    // Documents
    { label: 'Documents / Resources', value: 'docs-resources' },
    { label: 'Documents / Careers', value: 'docs-careers' },

    // Site Assets
    { label: 'Site Graphics', value: 'site-graphics' },
    { label: 'Map Markers', value: 'map-markers' },
    { label: 'Hero Images', value: 'hero-images' },
    { label: 'Background Images', value: 'backgrounds' },
    { label: 'Icons', value: 'icons' },
    { label: 'About Photos', value: 'about-photos' },
    { label: 'Event Photos', value: 'event-photos' },

    // Content Images
    { label: 'Content Images / Blog', value: 'content-blog' },
    { label: 'Content Images / Pages', value: 'content-pages' },
    { label: 'Content Images / News', value: 'content-news' },

    // General fallback
    { label: 'General', value: 'general' },
  ],
  admin: {
    position: 'sidebar',
  },
},
{
  name: 'associatedCollection',
  type: 'select',
  defaultValue: 'general',
  options: [
    { label: 'Airports', value: 'airports' },
    { label: 'Air Carriers', value: 'air-carriers' },
    { label: 'FBOs', value: 'fbos' },
    { label: 'MROs', value: 'mros' },
    { label: 'Organizations', value: 'organizations' },
    { label: 'Companies', value: 'companies' },
    { label: 'Aviation Careers', value: 'aviation-careers' },
    { label: 'Aviation Resources', value: 'aviation-resources' },
    { label: 'Training', value: 'training' },
    { label: 'Government Agencies', value: 'government-agencies' },
    { label: 'US Armed Forces', value: 'us-armed-forces' },
    { label: 'Site Graphics', value: 'site-graphics' },
    { label: 'General', value: 'general' },
  ],
  admin: {
    position: 'sidebar',
    description: 'Which collection this media belongs to',
  },
},
{
  name: 'tags',
  type: 'relationship',
  relationTo: 'tags' as const,
  hasMany: true,
  label: 'Media Tags',
  filterOptions: (args) => {
    // During bulk upload, args might be incomplete
    if (!args || !args.siblingData) {
      return true // Show all tags if we can't filter
    }

    try {
      const siblingData = args.siblingData as Record<string, any>
      const associatedCollection = siblingData?.associatedCollection

      if (associatedCollection && associatedCollection !== 'general') {
        return {
          category: { equals: associatedCollection },
        }
      }
    } catch (error) {
      // Silently fail and show all tags during bulk operations
      console.log('Tag filtering skipped during bulk operation')
    }

    return true // Default: show all tags
  },
  admin: {
    position: 'sidebar',
    allowCreate: true,
    description: 'Add tags for better organization',
  },
},
{
  name: 'credit',
  type: 'text',
  admin: {
    description: 'Photo credit or source',
    position: 'sidebar',
  },
},

],
upload: {
// Upload to the public/media directory in Next.js making them publicly accessible even outside of Payload
staticDir: path.resolve(dirname, '../../public/media'),
adminThumbnail: 'thumbnail',
focalPoint: true,
mimeTypes: ['image/', 'image/svg+xml', 'application/xml', 'application/pdf', 'video/'], // Added more types
imageSizes: [
{
name: 'thumbnail',
width: 300,
},
{
name: 'square',
width: 500,
height: 500,
},
{
name: 'small',
width: 600,
},
{
name: 'medium',
width: 900,
},
{
name: 'large',
width: 1400,
},
{
name: 'xlarge',
width: 1920,
},
{
name: 'og',
width: 1200,
height: 630,
crop: 'center',
},
],
},
}
`

[ghh1111]

The issue is that if I do a simple thing like click on an image to update it's ALT tag - my url turns into this which is ridiculous...

IN the url browser??? I don't want all that in my browser url - that is ridiculous....

http://localhost:3000/admin/collections/media?limit=100&sort=filename&columns=%5B%22filename%22%2C%22folder%22%2C%22associatedCollection%22%2C%22tags%22%2C%22alt%22%2C%22-updatedAt%22%2C%22-id%22%2C%22-caption%22%2C%22-credit%22%2C%22-createdAt%22%2C%22-url%22%2C%22-thumbnailURL%22%2C%22-mimeType%22%2C%22-filesize%22%2C%22-width%22%2C%22-height%22%2C%22-sizes.thumbnail.url%22%2C%22-sizes.thumbnail.width%22%2C%22-sizes.thumbnail.height%22%2C%22-sizes.thumbnail.mimeType%22%2C%22-sizes.thumbnail.filesize%22%2C%22-sizes.thumbnail.filename%22%2C%22-sizes.square.url%22%2C%22-sizes.square.width%22%2C%22-sizes.square.height%22%2C%22-sizes.square.mimeType%22%2C%22-sizes.square.filesize%22%2C%22-sizes.square.filename%22%2C%22-sizes.small.url%22%2C%22-sizes.small.width%22%2C%22-sizes.small.height%22%2C%22sizes.small.mimeType%22%2C%22-sizes.small.filesize%22%2C%22-sizes.small.filename%22%2C%22-sizes.medium.url%22%2C%22-sizes.medium.width%22%2C%22-sizes.medium.height%22%2C%22-sizes.medium.mimeType%22%2C%22-sizes.medium.filesize%22%2C%22-sizes.medium.filename%22%2C%22-sizes.large.url%22%2C%22-sizes.large.width%22%2C%22-sizes.large.height%22%2C%22-sizes.large.mimeType%22%2C%22-sizes.large.filesize%22%2C%22-sizes.large.filename%22%2C%22-sizes.xlarge.url%22%2C%22-sizes.xlarge.width%22%2C%22-sizes.xlarge.height%22%2C%22-sizes.xlarge.mimeType%22%2C%22-sizes.xlarge.filesize%22%2C%22-sizes.xlarge.filename%22%2C%22-sizes.og.url%22%2C%22-sizes.og.width%22%2C%22-sizes.og.height%22%2C%22-sizes.og.mimeType%22%2C%22-sizes.og.filesize%22%2C%22-sizes.og.filename%22%5D&where%5Bor%5D%5B0%5D%5Band%5D%5B0%5D%5Bfolder%5D%5Bequals%5D=map-markers&page=1

[ghh1111]

And, every time I reload the media library and watch in terminal - it reloads every file - thereby whacking my server costs again for around 2000 images. That can not be right. And still - can't not upload an image. Neither create new or bulk upload buttons are working - its just so stuck on the massive insane url.

[ghh1111]

I must just be missing something so obvious - it's designed to do this well -
My collection with 300 fields absolutely crashes just to filter on one thing - every field name gets dumped into the url.

[ghh1111]

Just loading the media page, no problem

GET /admin 200 in 192ms

GET /admin/collections/media 200 in 1085ms

GET /api/tags?depth=0&limit=250&where%5Bid%5D%5Bin%5D=2%2C21%2C39 200 in 165ms

I am watching in terminal

then I click filters...

http://localhost:3000/admin/collections/media?limit=100&sort=filename&columns=%5B%22filename%22%2C%22folder%22%2C%22associatedCollection%22%2C%22tags%22%2C%22alt%22%2C%22-updatedAt%22%2C%22-id%22%2C%22-caption%22%2C%22-credit%22%2C%22-createdAt%22%2C%22-url%22%2C%22-thumbnailURL%22%2C%22-mimeType%22%2C%22-filesize%22%2C%22-width%22%2C%22-height%22%2C%22-sizes.thumbnail.url%22%2C%22-sizes.thumbnail.width%22%2C%22-sizes.thumbnail.height%22%2C%22-sizes.thumbnail.mimeType%22%2C%22-sizes.thumbnail.filesize%22%2C%22-sizes.thumbnail.filename%22%2C%22-sizes.square.url%22%2C%22-sizes.square.width%22%2C%22-sizes.square.height%22%2C%22-sizes.square.mimeType%22%2C%22-sizes.square.filesize%22%2C%22-sizes.square.filename%22%2C%22-sizes.small.url%22%2C%22-sizes.small.width%22%2C%22-sizes.small.height%22%2C%22sizes.small.mimeType%22%2C%22-sizes.small.filesize%22%2C%22-sizes.small.filename%22%2C%22-sizes.medium.url%22%2C%22-sizes.medium.width%22%2C%22-sizes.medium.height%22%2C%22-sizes.medium.mimeType%22%2C%22-sizes.medium.filesize%22%2C%22-sizes.medium.filename%22%2C%22-sizes.large.url%22%2C%22-sizes.large.width%22%2C%22-sizes.large.height%22%2C%22-sizes.large.mimeType%22%2C%22-sizes.large.filesize%22%2C%22-sizes.large.filename%22%2C%22-sizes.xlarge.url%22%2C%22-sizes.xlarge.width%22%2C%22-sizes.xlarge.height%22%2C%22-sizes.xlarge.mimeType%22%2C%22-sizes.xlarge.filesize%22%2C%22-sizes.xlarge.filename%22%2C%22-sizes.og.url%22%2C%22-sizes.og.width%22%2C%22-sizes.og.height%22%2C%22-sizes.og.mimeType%22%2C%22-sizes.og.filesize%22%2C%22-sizes.og.filename%22%5D&page=1

so before I even choose anything - just clicking Filters this happens...

[ghh1111]

@DanRibbens - Thanks - what do you mean "try removing extras from your media collection"?
I figured out the buttons thing, that was something else but the issue remains of everything getting dumped into the url - is there a quick even if temporary workaround for right now? It's literally stopping me from going live. I just spent weeks getting all of my data migrated from Wordpress - much harder than I imagined - but now I can't get live because of the url issue. I've used Claude and ChatGPT for days trying to create a workaround like a plugin etc. - no dice. Nothing has worked.

Take my collection called Training which has 200 fields - its a really robust collection - that just crashes everything and looks awful in the browser. Not even a media issue with the sizes. But yes - all of those sizees in media going into the browser url is really problematic even without the few extra things I added. I don't even want my filters cluttered up with them honestly - 30 sizes showing up is just distracting and messy.

Anything you can think of to get me unstuck - like a quick plugin approach? - would sure be appreciated to get unstuck.

Thanks!

[ghh1111]

The extras are what I need.
The image size mess in the url is what I don't but mostly - I really don't want any of it in the url - there is nothing else I know of that I use that exposes all of that in a url - it just looks awful besides simply crashing my browser.
Any help? Time is truly of the essence here to get a workaround.

[jacobsfletch]

@ghh1111 I can understand the frustration. I think there's a few things we can do here.

First a little background: state in the URL is by design so that we can make a single request to the server when modifying columns, etc. The server upserts user prefs, queries the data, renders the view, etc. all in one roundtrip. The alternative to this would be to manage prefs client-side first, before going to the server for new table state (possible, but not ideal).

Another benefit to this pattern is the ability to share direct links to the exact state of your view. This is how the ?where= param has always worked. You can build a complex query and share it amongst your colleagues.

That said, there might be a "cleaner" approach to the way we format the ?columns= param. It might be possible to inject only the changed columns into the URL, as opposed to all of them. This would prevent it from getting excessively long. The tricky part here is tracking column position, but I do think this is worth exploring.

No matter what, though, the URL is not going to be beautiful. At least not without significantly overhauling the way we handle search params. Payload queries can be very complex, with or without columns. Either way, there would be encoded JSON in the URL.

In the meantime, it does sound like we need to allow opting-out of columns for image sizes. That will be an easy win. You should also set admin.disableListColumn on any fields that are irrelevant to display in the list view.

[ghh1111]

Thanks so much for the details. I get the logic but the outcome is that on a collection with 300 fields - it fully crashes the browser and my VS Code. But I need a way to interact with my data. Coming from Admin Columns Pro for example, it's the interface I use to filter by xyz to see my data, see which listing is missing a logo or a facebook link or whatever. How else would I visually interact with my data? It just can not be the case that 300 fields end up in a url.

[ghh1111]

Any suggestions for how to get unstuck? Its making it truly unusable