Conditional check before deleting media if it's in use

[AkashReddy-playy]

Hello,

Currently is it possible to check if media is in use in any of the collections?
This will be a great feature to have with an indicator to show relative links where media is used.
Any solutions or approaches to be considered would be great.

Ak

[jmikrut]

Hey @AkashReddy-playy — this would be a great idea for a plugin. It could be applied to any relationship or upload field.

It could dynamically build up a list of relationship / upload fields per collection, and then search for documents that have relationships to the document being deleted.

This would all happen in a beforeDelete hook. We don't currently have anything built like this but it would be a great plugin.

If you decide to build this, keep us posted—and we'll do the same!

[AkashReddy-playy]

Thanks @jmikrut, We will look into implementing it at some point. Much appreciate the direction.

[DanRibbens]

I have code for a similar example, but it may be of limited use if you have a lot of media in hard to query places on many relationships. Instead of checking on delete, this is a way to show a count and link to the list with filters set where a relationship is used in another collection.

In this example there are posts and categories as collections and the posts has a typical relationship field:

// post category field
{
  name: 'category',
  type: 'relationship',
  relationTo: 'categories',
  hasMany: true,
},

On the categories we have a UI field with a custom component that queries posts that have the relationship. The UI field is:

// post summary field:
{
  name: 'summary',
  type: 'ui',
  admin: {
    position: 'sidebar',
    components: {
      Field: CategorySummary,
    }
  }
}

Now the CategorySummary component:

import React, { useEffect, useState } from 'react';
import qs from 'qs';
import { useDocumentInfo } from 'payload/dist/admin/components/utilities/DocumentInfo';

const get = (url: string, params: unknown = {}): Promise<Response> => {
  const query = qs.stringify(params, { addQueryPrefix: true });
  return fetch(`${url}${query}`);
};

/**
 * A custom UI component for the category to display count of posts and add links
 * @constructor
 */
const CategorySummary: React.FC = () => {
  // access the id of a saved document from payload
  const { id } = useDocumentInfo();

  // getters and setters for component state variables
  const [isLoading, setIsLoading] = useState(true);
  const [postCount, setPostCount] = useState(null);
  const [error, setError] = useState(false);

  // useEffect adds a hook so that when the id is set the function is called
  useEffect(() => {
    if (id) {
      const queryRelations = async () => {
        const request = await get('/api/posts', {
          where: {
            // the 'in' operator is used when relations can be more than one
            // on relationships that are not a `hasMany` you would use 'equals' instead of 'in'
            category: { in: id },
            // to add more query constraints use 'or', 'and' operator objects
          },
          depth: 0,
          limit: 0,
        });
        const result = await request.json();

        if (result?.docs) {
          setPostCount(result?.totalDocs);
        }

        if (result.status >= 400) {
          setError(true);
        }

        setIsLoading(false);
      };

      const ignoreResult = queryRelations();
    }
  }, [id]);


  if (!id) {
    return null;
  }

  if (error) {
    return (<span>There was a problem fetching data</span>);
  }

  return (
    <div>
      <h4>
        Summary
      </h4>
      <p>
      {isLoading ? (
            loading...
      ) : (
            {/*
                link to /posts is formatted so that it will populate the filters inputs on the listing
                on relationships that are not a `hasMany` you would use [equals] instead of [in][0]
             */}
          <a href={`/admin/collections/posts?where[or][0][and][0][category][in][0]=${id}`} >
            {postCount}
            {' '}
            Posts
          </a>
      )}
    </p>

    </div>
  );
};

export default CategorySummary;

For your use, this might be more difficult if relationships are more complicated, such as:

1. media relationships are used in many collections (potentially a lot of queries)
2. media relationships are inside of blocks or other deeply nested structures that are difficult to query
3. you may also have richText fields that have embedded relationships to media, again harder to query for.

[AkashReddy-playy]

Hi Dan,
We were thinking what if we load any image into a collection or a block, and add a relation tag to the image referring to the document. The tag can be added conditional only if the tag doesn't exist. Querying sub-components might be very intensive and will not be optimal.
please see the reference image.
.
Maybe I am not sure it is the best approach. We believe having this will be great for project management.

[jmikrut]

@AkashReddy-playy — I see what you're going for. You could do the following:

• Add a hasMany relationship field to your Media collection, with relationTo set to any collection that could support media upload fields.
• Write an afterChange field hook, and add it to any upload fields you have throughout your project. The hook would take the value of the field, the ID of the document being edited, and then inject the ID of the parent doc into the media file itself. You'd also want to handle cases for if the field is cleared, or the parent document is deleted—in those cases you'd need to remove the relation from the media doc itself.

That way, your Media collection would be able to maintain a running list of references and you wouldn't need to query on subfields like you mention. Note that this is very similar to existing discussion #357 (inverse relationship fields).

Is this what you're looking for?

[AkashReddy-playy]

@jmikrut , thanks for the direction. This will really definitely help us.