Upload in React File Manager component

8 Jan 202524 minutes to read

The React File Manager component provides a uploadSettings property with various options to customize how files are uploaded, including controlling file size, restricting file types, checking for excessively large and empty files, and enabling chunk uploads.

Directory Upload

The directoryUpload property controls whether users can browse and upload entire directories (folders) in the Syncfusion React File Manager component.

To enable directory upload, set the directoryUpload property to true in the uploadSettings configuration.

When set to true, this property enables directory upload in the File Manager, allowing users to upload entire folders. If set to false, only individual files can be uploaded.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ directoryUpload: true }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ directoryUpload: true }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

Note: When directoryUpload is set to true, only folders can be uploaded. When it is set to false, only individual files can be uploaded. Simultaneous uploading of files and folders is not supported.

To learn more about the folder upload actions, refer to this link

Chunk Upload

The chunkSize property specifies the size of each chunk when uploading large files. It divides the file into smaller parts, which are uploaded sequentially to the server.

This property allows you to enable chunked uploads for large files by specifying a chunkSize.

By specifying a chunkSize, the large file is divided into smaller parts, reducing the load on the network and making the upload process more efficient.

In the following example, the chunkSize is set to 5 MB (5,242,880 bytes), and the maxFileSize is set to 70 MB (73,728,000 bytes). This means files that are up to 70 MB will be uploaded in 5 MB chunks.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ chunkSize: 5242880, maxFileSize: 73728000 }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ chunkSize: 5242880, maxFileSize: 73728000 }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

With chunk upload, the pause and resume options gives users enhanced control over the file upload process.

Note:

1. Chunk upload will work when the selected file size is greater than the specified chunk size. Otherwise, it upload the files normally.
2. The pause and resume features available only when the chunk upload is enabled.

Auto Upload

The autoUpload property controls whether files are automatically uploaded when they are added to the upload queue in the File Manager component.

The default value is true, the File Manager will automatically upload files as soon as they are added to the upload queue. If set to false, the files will not be uploaded automatically, giving you the chance to manipulate the files before uploading them to the server.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ autoUpload: false }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ autoUpload: false }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

Auto Close

The autoClose property controls whether the upload dialog automatically closes after all the files have been uploaded.

The default value is set to false, the upload dialog remains open even after the upload process is complete. If autoClose set to true, the upload dialog will automatically close after all the files in the upload queue are uploaded.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ autoClose: false }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ autoClose: false }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

Prevent upload based on file extensions

The allowedExtensions property specifies which file types are allowed for upload in the File Manager component by defining their extensions.

This property lets you define which file types can be uploaded by specifying allowed extensions, separated by commas. For example, to allow only image files, you would set the allowedExtensions property to .jpg,.png.

By setting the allowedExtensions property, you restrict the file types that can be uploaded. Only files with the specified extensions will be accepted.

If you want to allow only image files like .jpg and .png, you would set the property as follows:

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ allowedExtensions: '.jpg,.png' }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    // fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ allowedExtensions: '.jpg,.png' }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

Restrict drag and drop upload

The File Manager component provides support for external drag-and-drop functionality for uploading files by dragging it from local file system to File Manager.

Setting allowDragAndDrop property to false will not prevent the file upload operation through external drag and drop. It will only prevent drag and drop action within the File Manager component

To completely prevent the external drag-and-drop upload functionality (i.e., disallowing users from dragging and dropping files from outside into the File Manager), you can set the dropArea property to null. This can be done by accessing the File Manager instance via its class methods.

The following example demonstrates how to prevent the external drag and drop upload actions for all types of files in the File Manager component.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    let fileObj;
    function onCreated() {
        fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
    }
    return (<div className="control-section">
        <FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
            ajaxSettings={{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
            }} uploadSettings={{ allowedExtensions: '.jpg,.png', autoClose: false, autoUpload: false, chunkSize: 5242880, minFileSize: 120, maxFileSize: 73728000 }}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;

app.tsx

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

function App() {
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  let fileObj: FileManagerComponent;
  function onCreated(args: any) {
    fileObj.uploadObj.dropArea = null;  // Restrict file uploads by dragging them from the local file system to the File Manager.
  }
  return (
    <div className="control-section">
      <FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
        ajaxSettings={{
          downloadUrl: hostUrl + 'api/FileManager/Download',
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + 'api/FileManager/Upload',
          url: hostUrl + "api/FileManager/FileOperations"
        }} uploadSettings={{ allowedExtensions: '.jpg,.png', autoClose: false, autoUpload: false, chunkSize: 5242880, minFileSize: 120, maxFileSize: 73728000 }}>
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);

See also

• Set min and max file size in upload