Enable a collection's adminThumbnail to execute regardless of MIME type

[sannajammeh]

The adminThumbnail property has two states, string or function. As it currently stands, Payload will refuse to execute the adminThumbnail method on the frontend if the uploaded content is not of an image/* mime type. This is counterintuitive.

Use cases for enabling

1. Show thumbnail of video mp4 files
2. Show a custom file icon to reflect what type of file the user has uploaded
3. Show whatever the developer desires.

Current Workaround:

This function can execute regardless of mime type, payload does not do it. If you swap the mime type of a video inside MongoDB from video/mp4 to image/jpeg the function will execute.

The final MongoDB document of a video would look like this

{
  "name": "...",
   ...FileProps,
  "mimeType": "image/jpeg", // Overrided type so Payload will execute
  "_mimeType": "video/mp4" // For consumption if required by consumer
}

Example

This example utilises Bunny CDN's own thumbnail generator. Again this WORKS if you swap the mime type of the MongoDB document.

export const RecipeVideo: CollectionConfig = {
  slug: "recipe-video",
  fields: [
    {
      name: "alt",
      type: "text",
    },
  ],
  upload: {
    disableLocalStorage: true,
    mimeTypes: ["video/*"],
    adminThumbnail: BunnyStreamAdapter.getThumbnail,
  },
};

// Payload cloud upload plugin adapter
export class BunnyStreamAdapter {
// .... other methods

 static getThumbnail = ({ doc }: { doc: any }) => {
    if (!docHasStream(doc)) {
      console.warn("Doc is not a stream doc", doc);
      return "";
    }

    const hasTime = docHasTimestamps(doc);

    const url = new URL(doc.video.hls);
    url.pathname = `${doc.video.id}/thumbnail.jpg`;

    if (hasTime) {
      url.searchParams.set("v", `${new Date(doc.updatedAt).getTime()}`);
    }

    return url.toString();
  };
}

[jmikrut]

Hey @sannajammeh — I see what you're going for here.

I would happily merge a PR to make this function work as intended.

Here's the code that would need to be modified (I think this is the one spot that would need attention).
https://github.com/payloadcms/payload/blob/master/src/admin/hooks/useThumbnail.ts

If a dev provides a function to the adminThumbnail property, then we should execute it. Maybe we could make it so that function could return false or similar, and if it does, we then fall back to the default placeholder thumbnail.

It would be pretty simple and painless I think!

[sannajammeh]

Will get on it asap, many non-dev coworkers in my org would be happy about this 🥳