Customize custom thumbnail in React File manager component

18 Jan 20234 minutes to read

The default appearance of the file manager can customize with your own icon by using showThumbnail property.

The following example demonstrate how to add a custom icon in largeicons view.

app.jsx

import { FileManagerComponent, Inject, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" showThumbnail={false} ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + 'api/FileManager/GetImage',
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + 'api/FileManager/FileOperations'
        }}>
              <Inject services={[NavigationPane, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;

app.tsx

import { FileManagerComponent, Inject, NavigationPane, Toolbar} from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let fileObj: FileManagerComponent;
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";

  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file"  showThumbnail={false}
              ajaxSettings = {{
                downloadUrl: hostUrl +'api/FileManager/Download',
                getImageUrl: hostUrl +'api/FileManager/GetImage',
                uploadUrl: hostUrl +'api/FileManager/Upload',
                url: hostUrl + 'api/FileManager/FileOperations'                  
              }} >
              <Inject services={[ NavigationPane, Toolbar]} />
          </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);