# file-manager-file-upload

> File manager launched from an uploader dialog to pick files for a form submit.

**Framework:** react  **Component:** FileManager  **Variant:** file-upload

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/file-manager-file-upload.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-filemanager @syncfusion/ej2-react-inputs @syncfusion/ej2-react-popups @syncfusion/ej2-react-buttons
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/file-manager-file-upload/FileManager.tsx

```tsx
import { useRef, useState } from 'react';
import { type FilesPropModel, UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent,type AnimationSettingsModel } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';

/**
 * File Manager real time use case sample
 */
const SAMPLE_CSS = `
.fileupload {
    max-width: 500px;
    margin: auto;
}
#openBtn {
    position: absolute;
    top: 28px;
    left: 43%;
}
#target {
    height: 550px;
}
#dialog {
    top: 20px !important;
    max-height: 500px !important;
}

#uploadFileManager .e-file-drop, #uploadFileManager .e-css.e-btn {
    display: none;
}

.tailwind #openBtn,
.tailwind-dark #openBtn {
    top: 28px;
}

.bootstrap #openBtn,
.bootstrap-dark #openBtn {
    top: 30px;
}

.bootstrap5 #openBtn,
.bootstrap5-dark #openBtn {
    top: 26px;
}

#uploadFileManager .e-upload .e-file-select-wrap{
    display: block;
}

.ej2-new #openBtn {
    top: 171px;
}

@media (max-width: 768px) {
    .ej2-new #openBtn {
        top: 300px !important;
        left: 35%;
    }
}

.fileupload .e-file-select-wrap {
    padding: 20px 0 20px 20px;
} `;

const FileUpload = () => {

    const [display, setDisplay] = useState<string>('block');
    const [file, setFile] = useState <FilesPropModel[]>([{
        name: "",
        size: null,
        type: ""
    }]);
    const [path, setPath] = useState<string>('/');
    const [selectedItem, setSelectedItem] = useState<string[]>([]);
    let fileUploadObj = useRef<UploaderComponent>(null);
    let dialogObj = useRef<DialogComponent>(null);
    let filemanagerObj = useRef<FileManagerComponent>(null); 
    let animationSettings:AnimationSettingsModel = { effect: 'None' };
    // 'Uploader' will be shown, if Dialog is closed
    const dialogClose = (): void => {
        setDisplay('block');
    }

    // 'Uploader' will be hidden, if Dialog is opened
    const dialogOpen = (): void => {
       setDisplay('none');
    }

    // File Manager's fileOpen event function
    const onFileOpen = (args: any): void => {
        let file = (args as any).fileDetails;
        if (file.isFile) {
            args.cancel = true;
            if (file.size <= 0 ) { file.size = 10000; }
            setFile([{ name: file.name, size: file.size, type: file.type }]);
            dialogObj.current.hide();
        }
    }
    const btnClick = (): void => {
        dialogObj.current.show();
        dialogOpen();
        setPath('/');
        setSelectedItem([]);
        filemanagerObj.current.refresh();
    }
    let hostUrl: string = "https://physical-service.syncfusion.com/";
    return(
        <div>
            <div className="control-section">
                <style>{SAMPLE_CSS}</style>
                <div id='uploadFileManager' className="fileupload" style={{display: display}}>
                    <UploaderComponent id='fileUpload' type='file' ref = {fileUploadObj} files={file}></UploaderComponent>
                    <ButtonComponent id="openBtn"  onClick={ btnClick.bind(this) }>File Browser</ButtonComponent>
                </div>
                <div id='target' className="control-section">
                    <DialogComponent width='850px' id='dialog' target={'#target'} ref={dialogObj} header="Select a file" showCloseIcon={true} visible={false} open={dialogOpen.bind(this)} close={dialogClose.bind(this)} animationSettings={animationSettings} >
                        <FileManagerComponent id="filemanager" ref = {filemanagerObj} path={path} selectedItems={selectedItem} ajaxSettings = {{url: hostUrl + "api/FileManager/FileOperations", getImageUrl: hostUrl + "api/FileManager/GetImage", uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download'}} allowMultiSelection={false} toolbarSettings={{ items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }} contextMenuSettings={{file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'], visible: true }} fileOpen={onFileOpen.bind(this)}>
                            <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
                        </FileManagerComponent>
                    </DialogComponent>
                </div>
            </div>
        </div>
    );
}
export default FileUpload;
```