Closed jestrickler closed 3 years ago
I don't believe we expose the FileBrowser methods needed to achieve this. So we don't officially support this. Regardless, you can use refs to access the FileBrowser and call these methods imperatively.
Some things to note:
The default export FileBrowser is wrapped in a ReactDnD higher order component, @DragDropContext(HTML5Backend)
, so any ref on the FileBrowser will point to that - you'll need to make sure you're accessing the underlying FileBrowser that DnD is wrapping. Below I accessed it with .child
You'll want to recursively walk through the folders that the file is found in and call openFolder
on each of them
The below should work for you if you want to preview it in storybook:
class OpenFile extends React.Component {
fileBrowserRef = null
componentDidMount() {
if (this.fileBrowserRef) {
this.fileBrowserRef.child.openFolder('animals/')
this.fileBrowserRef.child.openFolder('animals/pets/')
this.fileBrowserRef.child.select('animals/pets/dog.png', 'file')
this.fileBrowserRef.child.preview(
this.fileBrowserRef.child.getFile('animals/pets/dog.png'),
)
}
}
render() {
return (
<FileBrowser
ref={el => { this.fileBrowserRef = el }}
files={[
{
key: 'animals/',
modified: +Moment().subtract(1, 'hours'),
size: 0,
},
{
key: 'animals/pets/',
modified: +Moment().subtract(1, 'hours'),
size: 0,
},
{
key: 'animals/pets/dog.png',
modified: +Moment().subtract(1, 'hours'),
size: 48 * 1024,
},
{
key: 'elephant.png',
modified: +Moment().subtract(3, 'days'),
size: 52 * 1024,
},
]}
/>
)
}
}
storiesOf('FileBrowser', module)
.add('Open File programatically', () => <OpenFile />)
@mwfister
I got an error:
ncaught TypeError: Cannot read properties of undefined (reading 'openFolder')
at OpenFile.componentDidMount (OpenFile.jsx:10:1)
at commitLifeCycles (react-dom.development.js:20663:1)
at commitLayoutEffects (react-dom.development.js:23426:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at commitRootImpl (react-dom.development.js:23151:1)
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at commitRoot (react-dom.development.js:22990:1)
How can I do that via useRef?
I am using react-keyed-file-browser@1.6.1. What I'd like to do is if the url specifies a particular file ('/files/{id}') show the file-browser with that file pre-selected as if all containing folders and the file itself had been clicked: