Support previewing asset types other than video and images

[sarmeyer]

Is your feature request related to a problem? Please describe.
There's currently no way to preview an asset type that isn't a video or image. This has come up when adding raw asset types. They aren't caught by the first condition in src/components/AssetPreview.tsx and so a preview is attempted with an img tag, but there are other resource_types available that won't preview properly with the default return value

(this particular asset is .doc type, but this happens with other formats like pdfs)

Describe the solution you'd like
Add another condition to render resource types other than images or videos, or allow the consumer to define their own preview config

Describe alternatives you've considered
I'm considering recreating the cloudinary asset schema type for the instances where files or other raw assets types are often used, so that we can define our own preview config, but this is not an ideal solution

[dubhue]

It would be nice to be able to pass in/use a customized AssetPreview component that had access to the Cloudinary schema, so one could customize the preview with either text or perhaps a transformed version of the asset if it is a convertible but not tag supported image type.

[aadgrant]

I solved this by creating a component:

(Note that I'm using typescript not javascript so please adjust as needed!)

/components/cloudinaryPreviewImage.tsx

export default (url?: string, alt?: string) => (<img src={url?.replace('image/upload', 'image/upload/c_thumb,w_32,g_face,q_auto,f_auto')} alt={alt} />)

And then when I require a preview image:

/schemaTypes/my-new-type.ts

import previewCloudinaryImage from "../components/previewCloudinaryImage";

export const myNewType = defineType({
  name: "myNewType",
  type: "document",
  fields: [
    defineField({
      name: "title",
      type: "string,
    }),
    defineField({
      name: "image",
      type: "cloudinary.asset",
    }),
  ],
  preview: {
    select: {
      title: 'title',
      media: 'image.url',
    },
    prepare: ({ title, media }) => ({
      title,
      media: previewCloudinaryImage(media, title)
    })
  },
}