How can I customize the uppy/Dashboard UI

Uppy
1

I am going to use @uppy/dashboard plugin and transloadit as a image cropper.
Currently, the FileCard component in @uppy/dashboard has a Edit button.
Can I customize the @uppy/dashboard UI so that a FileCard component has a Crop button?
My project was built with react.js.

Thanks.

2

Sorry for the really late response, but if this issue is still troubling you or someone, I hope I can help out

If you are referring to changing the wording of buttons, this is achievable via the locale settings

Here is an example with setting the locale of the edit button

uppy.use(Dashboard, {
  locale: {
    editFile: 'Crop file',
    edit: 'Crop',
  }
}

And here is an example for React

import React from 'react'
import Uppy from '@uppy/core'
import { Dashboard } from '@uppy/react'

import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.uppy = Uppy()
      .use(Transloadit, {})
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return (
      <Dashboard uppy={this.uppy} locale={{
        editFile: 'Crop file',
        edit: 'Crop',
      }}/>
    )
  }
}
3

Ok, I’m not sure this is out of context. But how can I customize dashboard UI so that when we add file, by default it opens the image editor?