Question : how could we customize files meta-data ?

Hi Uppy Teams

i’m just discovering Uppy, i need to put an other meta-data field in this view, do you think it will be easy to do it using Uppy ? We can put a Caption, i would like to add a Recipients input (which will be a React Component)

Thanks a lot

[goto-bus-stop]

If you would like to PR it that would be very helpful!

I think, a good way to approach this is to allow the values of the Dashboard’s metaFields option to have a render() method that receives a props object (name, id, value onChange handler) and returns a Preact element. Then, we can use that Preact element in place of our default <input type="text">. I imagine it’d be used like this:

uppy.use(Dashboard, {
  /* ..., */
  metaFields: [
    {
      id: 'location',
      name: 'Coordinates',
      render ({ value, onChange }) {
        return <CoordinateSelector
          currentCoordinates={value.split(',')}
          onChange={(coords) => onChange(`${coords[0]},${coords[1]}`)}
        />
      }
    }
  ]
})

The rendering happens here: https://github.com/transloadit/uppy/blob/d6578197ca9cfab904ebd051bdb0f28720fc9e56/packages/%40uppy/dashboard/src/components/FileCard.js#L40-L57

Until the user presses “Save changes” in the dashboard, all changes are stored in the FileCard component’s this.meta property. I think, if the same would be done for the values gotten from a custom render() function, no additional changes need to be made to save those values to the file’s metadata object.

[kvz]

We love this idea, but will probably do it via jsx rendering as was mentioned by Renee and also discussed in https://github.com/transloadit/uppy/issues/617

Closing this one then!