Question : how could we customize files meta-data ?

[Aarbel]

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

[arturi]

Hi! Right now these can only be plain text inputs that you can add via https://uppy.io/docs/dashboard/#metaFields. There were some requests for select support and then completely custom things, like a map location picker. We haven’t decided on the most flexible approach yet, open to suggestions. One of the proposed solutions was to allow rendering completely custom content in place of the meta screen (or just the area where inputs currently are).

[arturi]

Related #617, #651 and #454

[Aarbel]

Thanks Arturi.

Regarding all these issues i think it could be great to add a generic approach that allows to add any kind of field / data with custom UI, it's the right time to do it !

Example of use cases that could be hard to implement each time someone ask you to add it :

• Select
• Map
• Array fields
• Toggle buttons
• Textareas
• etc...

[kvz]

Maybe

• if array of objects: very basic key/value rendering (input + select, and that's it for the coming year?)
• if string: assume html and render as-is

?

I dislike having multiple ways to do 1 thing. But i think i dislike always leaking a lot of html structure into what could be simple key/value configuration, more.

[cmawhorter]

perhaps https://github.com/mozilla-services/react-jsonschema-form?

[Aarbel]

@cmawhorter does it allow to put some custom React nodes ?

[Aarbel]

@arturi did you planned to work on it ?

[kvz]

Just a friendly note that Artur is on holidays, so it might take a bit before he can respond :)

[Aarbel]

ok thx @kvz

[goto-bus-stop]

We want to do this but there is no timeline currently.

[Aarbel]

@goto-bus-stop how could i help ?

[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:

uppy/packages/@uppy/dashboard/src/components/FileCard.js

Lines 40 to 57 in d657819

	renderMetaFields (file) {
	const metaFields = this.props.metaFields || []
	return metaFields.map((field, i) => {
	return <fieldset class="uppy-DashboardFileCard-fieldset">
	<label class="uppy-DashboardFileCard-label">{field.name}</label>
	<input class="uppy-c-textInput uppy-DashboardFileCard-input"
	type="text"
	data-name={field.id}
	value={file.meta[field.id]}
	placeholder={field.placeholder}
	onkeyup={this.tempStoreMetaOrSubmit}
	onkeydown={this.tempStoreMetaOrSubmit}
	onkeypress={this.tempStoreMetaOrSubmit}
	ref={(el) => {
	if (i === 0) this.firstInput = el
	}} /></fieldset>
	})
	}

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.

[cmawhorter]

@Aarbel i'm not too familiar with react, but you can build custom react components to implment your own form elements/behavior. (unrelated to uppy i built a wrapper around tinymce to get a richtext form component). it's ok.

[Aarbel]

i want to add a token input for each file (to assign people to files). Will be hard to do it around uppy, or maybe in a very unstable way, don't you think ?

[goto-bus-stop]

Putting anything that's not a simple <input type="text"> in the metadata panel is very hard without the changes to Uppy I described above.

[swetapatnaik]

Are there any updates on this issue, like adding select fields to the metaData form.

[Aarbel]

Overbooked since August, no chance for me to work on it the next months :/

[kvz]

We love this idea, but will probably do it via jsx rendering as was mentioned by Renee and also discussed in #617

Closing this one then!