When to use
If you want to give your users the ability not only to select files or images but also to manage storage and upload files directly, embedding a full-featured file manager component in your React app is a good approach.
You can also automatically retrieve generated image previews or other formats by specifying them as options in the component configuration.
How it works
You can implement a file manager dialog using the standard Flmngr.open({params}) method from the Flmngr file manager API.
If you prefer not to use modal dialogs in your UI, you can instead use the <FlmngrPanel> component to achieve the same functionality.
As in the pure JavaScript sample, the React version accepts almost the same parameters. The isMultiple option controls whether multiple file selections are allowed in the component.
How to start using
Use this code in your React application by installing the React file manager component from NPM.
Both JavaScript and TypeScript are supported; the latter includes .d.ts definitions right in the package.
The package not only provides a file manager panel as a React component, but also exposes the Flmngr API for calling dialogs.
import {Flmngr, FlmngrPanel} from "@flmngr/flmngr-react";
import React from 'react@18.2.0';
import ReactDOM from 'react-dom@18.2.0';
class MyComponent extends React.Component {
state: {
imagesSelected: {
url: string,
urlPreview: string
}[]
} = {
imagesSelected: []
}
render() {
return <div style={{width:"100%",height:"100%"}}>
{
this.state.imagesSelected.length === 0 ?
this.render__fileManager() :
this.render__images()
}
</div>;
}
render__fileManager() {
return <div style={{width: "1100px", height: "600px"}}>
<p>Preview images are automatically generated each time you select images by pressing "OK" below</p>
<FlmngrPanel
apiKey="FLMN24RR1234123412341234"
urlFileManager="https://fm.flmngr.com/fileManager"
urlFiles="https://fm.flmngr.com/files"
isMultiple={true /* Crucial to allow picking a set of files*/}
acceptExtensions={["png", "jpeg", "jpg", "webp", "gif"]}
createImageFormats={
/* Optional part for auto creation of previews for each selected image */
["preview"]
}
imageFormats={[
{
id: "preview",
title: "Preview",
suffix: "-preview",
maxWidth: 250,
maxHeight: 250
}
]}
onFinish={(
files: {
url: string,
formats: {
format: string,
url: string
}[]
}[]
) => {
this.setState({
imagesSelected: files.map(file => {
return {
url: file.url,
urlPreview: file.formats.find(formatItem => formatItem.format === "preview").url
};
});
});
}
/>
</div>;
}
render__images() {
return <div id="images">
<p>Images here are rendered as especially generated previews, click on an image to open it's original</p>
{
this.state.imagesSelected.map(image => {
return <div id={image.url} className="image">
<img
src={image.urlPreview}
alt="Image selected with React component of Flmngr file manager"
onClick={() => {
window.open(image.url, "_blank");
}}
/>
<p>{image.url}</p>
</div>
})
}
</div>;
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
);<h2>React File Manager Component for Selecting a Set of Images</h2>
<div id="root">
Mounting the component...
</div>body {
padding: 20px;
background-color: #F4F4F4;
}
h2 {
font-weight: bold;
}
#images {
.image {
border: 1px solid #DDD;
box-shadow: 5px 5px 0 0 #DDD;
background-color: white;
padding: 10px;
display: inline-flex;
flex-direction: column;
margin: 0 25px 25px 0;
img {
max-height: 250px;
cursor: pointer;
border: 2px solid #007FFF;
&:hover {
border-color: orange;
}
}
p {
margin: 5px 0 0 0;
font-size: 14px;
color: #444;
}
}
}