Plugin: Link upload to product

[Ryeori]

Note

Because im a mobile developer not a front/back end developer and im not that familiar with typescript, this script should be wrapped with plugin according to payload cms documentation, here is my attempt to make it plugin and uplaoad to npm, it wont run so you can take it and make it work.

About this almost-plugin

Hello there, so im creating a ecommerce website with payload as backend and i aint found a way to somehow rename upload to match product id/ title and i've created a small script to rename uploads in collections (like Products collection and product have Preview upload field).

It will rename uploads to match this pattern:

[newFileNamePrefix]_[newFileNameSuffix].[CurrentFileExtension]

Prefix - could be a product id or title, or any other identifying thing to work with.
Suffix - for my example i've used uuid v4, but you can generate whatever you want
File extension - file current extension

Usage

1. This function depends on fs so you have to make sure you have webpack config added like this to your payload.config.ts:

export default buildConfig({
  serverURL: "http://localhost:3000",
  admin: {
    user: Users.slug,
    webpack: (config) => ({
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          fs: false,
        },
      },
    }),
  },
  localization: {
    ...
  },
  collections: [
    ...
  ],
  typescript: {
    outputFile: path.resolve(__dirname, "payload-types.ts"),
  },
});

here is the instructions for it

2. Generate types by running:

yarn generate:types

3. Copy code gist from below to your project
   Code gist here

4. Call it your upload filed after cahnge hook

fields:{
  {
        name: "preview",
        type: "upload",
        relationTo: productMediaCollection,
        hooks: {
          afterChange: [
            async (args) => {
              //update product image on change

              const imageId: string = args.data.preview?.id ?? args.data.preview;
  
              if (
                Boolean(args.data.preview) &&
                args.data.preview != args.previousDoc.preview
              ) {
                await updateUploadsNameAndPath({
                  currentUploads: [imageId],
                  newFileNamePrefix: args.data.productId,
                  documentLinkToId: args.previousDoc.id ?? args.originalDoc.id,
                  collection: "products-media",
                  newFileNameSuffix: uuidv4(),
                });
              }
            },
          ],
        },
      },
}

And here it is, after you save your product it will automatically rename all provided uploads and sizes

Faq

1) Will it change other images sizes?
Yes, it will change other image sizes as well.

2) Can i provide multiple images for example if i have a other product images
Yes you can provide more, just add their's upload id into currentUploadsarray