Computing metadata on image/video upload

[wem5637]

When a user uploads an image through the media manager, I'm looking for a way to execute a node.js metadata processing script. Any insight as to how this can be done?

[konsumer]

I am doing something similar to get height/width, at the schema-level. It's a bit of a hack, but it works for me. It should be noted, this is all client-side, so it may not work directly with your node script.

First, I add this to the templates for my richtext editor schema, so it will add Image to embed:

export const templateImage = {
  name: 'Image',
  label: 'Image',
  fields: [
    {
      name: 'src',
      label: 'Image',
      type: 'image',
      ui: {
        validate: (value, allValues, meta, field) => {
          if (value) {
            const i = new Image()
            i.onload = () => {
              allValues.width = i.naturalWidth
              allValues.height = i.naturalHeight
            }
            i.src = value
          }
        }
      }
    },
    {
      name: 'width',
      label: 'Width',
      type: 'number',
      ui: {
        component: () => null
      }
    },
    {
      name: 'height',
      label: 'Height',
      type: 'number',
      ui: {
        component: () => null
      }
    },
    {
      name: 'alt',
      label: 'Alt Text (for screen-readers and SEO)',
      type: 'string'
    },
    {
      name: 'title',
      label: 'Title (shows on hover)',
      type: 'string'
    }
  ]
}

// ...

{
      type: 'rich-text',
      label: 'Body',
      name: 'body',
      isBody: true,
      required: true,
      templates: [
        templateImage,
        // put whatever other embeds you want here
      ]
    },

This hides height/width inputs and computes the dimensions, client-side when the image changes.

When I render the content:

<TinaMarkdown components={componentsRow} content={block.body} />

I add Image to componentsRow. Mine looks like this, but you can do whatever you like:

export const Image = ({ type, ...props }) => <img className='mb-4' {...props} />

Now, in the mdx, I get things like this:

<Image height={200} width={100} alt='alt text' />

and since it knows how to do <Image>, it renders it correctly. Additionally, I hide the built-in img-button in the richtext editor, in css:

/* XXX:  hide the image button to force use of the embed menu */
.with-toolbar > .sticky > .grid > .grid > span:nth-child(3) {
  display: none !important;
}

[konsumer]

I also add a ton of other embeds, like for inserting twitter posts and youtube videos, and things like that. Each of them is rendered as a react component, in the mdx.

[konsumer]

Since you can do async stuff, as I am doing in validate, you could really do anything, so if there isn't a way to get the meta-info you need, you could run a service and do a http request for it. Might be a bit hack-on-top-of-hack, but this allows you to do just about anything.

[wem5637]

this is exactly what i was looking for. the node.js script mentioned previously was really just a roundabout means to access image metadata. thanks so much! knowing how the validator works and that we can write data that way is really going to help moving forward

[konsumer]

Yeh, figuring this out was a game-changer for me. I am doing a bunch of fancy fields and embeds now, and it all runs really great, and feels very built-in to tina.

[wspringer]

To others coming here: it seems allValues has a different definition by now. Also, setting the props asynchronously don't seem to cause the component from getting rerendered.