HelpBot Assistant

How can I help you?

File source in React Uploader component

21 Feb 202624 minutes to read

Paste to upload

In addition to selecting or dragging files, the Uploader component supports uploading image files directly from the clipboard using paste operations. Any image copied to the clipboard can be uploaded immediately.

When an image is pasted, it is saved on the server with the default filename image.png. Rename the file on the server-side using custom logic or the getUniqueID method to generate unique filenames. Refer to the following example.

[class-component]

import { getUniqueID } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    onUploadBegin(args) {
        // check whether the file is uploading from paste.
        if (args.fileData.fileSource === 'paste') {
            const newName = getUniqueID(args.fileData.name.substring(0, args.fileData.name.lastIndexOf('.'))) + '.png';
            args.customFormData = [{ 'fileName': newName }];
        }
    }
    render() {
        return (<UploaderComponent autoUpload={false} asyncSettings={this.path} uploading={this.onUploadBegin = this.onUploadBegin.bind(this)}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { getUniqueID } from '@syncfusion/ej2-base';
import { UploaderComponent, UploadingEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    public onUploadBegin(args: UploadingEventArgs): void {
        // check whether the file is uploading from paste.
        if (args.fileData.fileSource === 'paste') {
            const newName: string = getUniqueID(args.fileData.name.substring(0, args.fileData.name.lastIndexOf('.'))) + '.png';
            args.customFormData = [{'fileName': newName}];
        }
    }
    public render(): JSX.Element{
        return (
            <UploaderComponent autoUpload={false}
            asyncSettings={this.path} uploading={this.onUploadBegin = this.onUploadBegin.bind(this)} />);
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

import { getUniqueID } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    function onUploadBegin(args) {
        // check whether the file is uploading from paste.
        if (args.fileData.fileSource === 'paste') {
            const newName = getUniqueID(args.fileData.name.substring(0, args.fileData.name.lastIndexOf('.'))) + '.png';
            args.customFormData = [{ 'fileName': newName }];
        }
    }
    return (<UploaderComponent autoUpload={false} asyncSettings={path} uploading={onUploadBegin = onUploadBegin.bind(this)}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { getUniqueID } from '@syncfusion/ej2-base';
import { UploaderComponent, UploadingEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    function onUploadBegin(args: UploadingEventArgs): void {
        // check whether the file is uploading from paste.
        if (args.fileData.fileSource === 'paste') {
            const newName: string = getUniqueID(args.fileData.name.substring(0, args.fileData.name.lastIndexOf('.'))) + '.png';
            args.customFormData = [{'fileName': newName}];
        }
    }
        return (
            <UploaderComponent autoUpload={false}
            asyncSettings={path} uploading={onUploadBegin = onUploadBegin.bind(this)} />);
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

Save action for Paste upload

public void Save()
{
    var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"];
    var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles");
    var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
    if (!System.IO.File.Exists(fileSavePath))
    {
        httpPostedFile.SaveAs(fileSavePath);
        var newName = System.Web.HttpContext.Current.Request.Form["fileName"];
        var filePath = Path.Combine(fileSavePath.Substring(0, fileSavePath.LastIndexOf("\\")), newName);
        // Rename the file
        System.IO.File.Move(fileSavePath, newName);
        HttpResponse Response = System.Web.HttpContext.Current.Response;
        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        Response.StatusDescription = fileSavePath;
        Response.End();
    }
}

Directory upload

Upload entire folders with the directoryUpload property enabled. The Uploader processes all files and subdirectories within the selected folder, allowing folder selection instead of individual file selection.

Directory upload is supported in browsers with HTML5 directory capability. Edge browser supports directory upload via drag-and-drop. Refer to the following example for implementation details.

[Class-component]

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    render() {
        return (<UploaderComponent asyncSettings={this.path} directoryUpload={true}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  public path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  public render(): JSX.Element {
    return (
        <UploaderComponent asyncSettings={this.path} directoryUpload={true} />);
  }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    return (<UploaderComponent asyncSettings={path} directoryUpload={true}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App(){
  const path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
    return (
        <UploaderComponent asyncSettings={path} directoryUpload={true} />);
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

Save action for directory upload

public void Save() {
    var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"];
    var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles");
    // split the folders by using file name
    string[] folders = httpPostedFile.FileName.Split('/');
    string fileSavePath = "";
    if (folders.Length > 1)
    {
        for (var i = 0; i < folders.Length - 1; i++)
        {
            var newFolder = Path.Combine(fileSave, folders[i]);
            // create folder
            Directory.CreateDirectory(newFolder);
            fileSave = newFolder;
        }
        fileSavePath = Path.Combine(fileSave, folders[folders.Length - 1]);
    }
    else
    {
        fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
    }
    if (!System.IO.File.Exists(fileSavePath))
    {
        // save file in the corresponding server location
        httpPostedFile.SaveAs(fileSavePath);
        HttpResponse Response = System.Web.HttpContext.Current.Response;
        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        // Sending the file path to client side
        Response.StatusDescription = fileSavePath;
        Response.End();
    }
}

Drag and drop

Drag files from the file explorer and drop them into the designated drop area to initiate upload. By default, the Uploader component itself serves as the drop target. The drop area visually highlights when files are dragged over it.

Custom drop area

Configure a custom external element as the drop target using the dropArea property, specified as an HTML element or element ID.

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
export default class App extends React.Component {
    uploadObj;
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    dropAreaRef;
    onCreated() {
        this.uploadObj.dropArea = this.dropAreaRef;
        this.uploadObj.dataBind();
    }
    render() {
        return (<div id='container'>
                <div id='droparea' ref={dropAreaEle => this.dropAreaRef = dropAreaEle}>
                Drop files here to upload
                </div>
                <div id='uploadfile'>
                    <UploaderComponent autoUpload={false} ref={upload => { this.uploadObj = upload; }} created={this.onCreated = this.onCreated.bind(this)} asyncSettings={this.path}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';

export default class App extends React.Component<{}, {}> {
    public uploadObj: UploaderComponent;
    public path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    private dropAreaRef: HTMLElement;
    public onCreated(): void {
        this.uploadObj.dropArea = this.dropAreaRef;
        this.uploadObj.dataBind();
    }

    public render(): JSX.Element {
        return (
            <div id='container'>
                <div id='droparea' ref={dropAreaEle => this.dropAreaRef = dropAreaEle!}>
                Drop files here to upload
                </div>
                <div id='uploadfile'>
                    <UploaderComponent autoUpload={false}  ref = {upload => {this.uploadObj = upload !}} created={this.onCreated = this.onCreated.bind(this)} asyncSettings={this.path} />
                </div>
            </div>);
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
    let uploadObj;
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    let dropAreaRef;
    function onCreated() {
        uploadObj.dropArea = dropAreaRef;
        uploadObj.dataBind();
    }
    return (<div id='container'>
                <div id='droparea' ref={dropAreaEle => dropAreaRef = dropAreaEle}>
                Drop files here to upload
                </div>
                <div id='uploadfile'>
                    <UploaderComponent autoUpload={false} ref={upload => { uploadObj = upload; }} created={onCreated = onCreated.bind(this)} asyncSettings={path}/>
                </div>
            </div>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
    let uploadObj: UploaderComponent;
    const path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    let dropAreaRef: HTMLElement;
    function onCreated(): void {
        uploadObj.dropArea = dropAreaRef;
        uploadObj.dataBind();
    }

        return (
            <div id='container'>
                <div id='droparea' ref={dropAreaEle => dropAreaRef = dropAreaEle!}>
                Drop files here to upload
                </div>
                <div id='uploadfile'>
                    <UploaderComponent autoUpload={false}  ref = {upload => {uploadObj = upload !}} created={onCreated = onCreated.bind(this)} asyncSettings={path} />
                </div>
            </div>);
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

Customize drop area

Customize the drop area appearance by overriding default styles. The e-upload-drag-hover class is applied when files are dragged over the drop area, enabling visual feedback customization.

[Class-component]

import { select } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    uploadObj;
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    dropAreaRef;
    onCreated() {
        this.uploadObj.dropArea = this.dropAreaRef;
        this.uploadObj.dataBind();
    }
    browseClick(args) {
        const wrapperEle = select('.e-file-select-wrap button', document);
        wrapperEle.click();
        args.preventDefault();
    }
    render() {
        return (<div id='container'>
                <div id='dropArea'>
                    <span id='drop'> Drop files here or <a href="" id='browse' onClick={this.browseClick = this.browseClick.bind(this)}><u>Browse</u></a> </span>
                    <UploaderComponent asyncSettings={this.path} ref={upload => { this.uploadObj = upload; }} created={this.onCreated = this.onCreated.bind(this)}/>
                </div>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { select } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public uploadObj: UploaderComponent;
    public path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    private dropAreaRef: HTMLElement;
    public onCreated(): void {
        this.uploadObj.dropArea = this.dropAreaRef;
        this.uploadObj.dataBind();
    }

    public browseClick(args: React.MouseEvent): void {
        const wrapperEle: HTMLElement = select('.e-file-select-wrap button', document) as HTMLElement;
        wrapperEle.click();
        args.preventDefault();
    }
    public render(): JSX.Element {
        return (
            <div id='container'>
                <div id='dropArea'>
                    <span id='drop'> Drop files here or <a href="" id='browse' onClick={this.browseClick=this.browseClick.bind(this)}><u>Browse</u></a> </span>
                    <UploaderComponent asyncSettings={this.path}  ref = {upload => {this.uploadObj = upload!}} created={this.onCreated = this.onCreated.bind(this)}/>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

import { select } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let uploadObj;
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    let dropAreaRef;
    function onCreated() {
        uploadObj.dropArea = dropAreaRef;
        uploadObj.dataBind();
    }
    function browseClick(args) {
        const wrapperEle = select('.e-file-select-wrap button', document);
        wrapperEle.click();
        args.preventDefault();
    }
    return (<div id='container'>
                <div id='dropArea'>
                    <span id='drop'> Drop files here or <a href="" id='browse' onClick={browseClick = browseClick.bind(this)}><u>Browse</u></a> </span>
                    <UploaderComponent asyncSettings={path} ref={upload => { uploadObj = upload; }} created={onCreated = onCreated.bind(this)}/>
                </div>
            </div>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { select } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let uploadObj: UploaderComponent;
    const path: object = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    }
    let dropAreaRef: HTMLElement;
    function onCreated(): void {
        uploadObj.dropArea = dropAreaRef;
        uploadObj.dataBind();
    }

    function browseClick(args: React.MouseEvent): void {
        const wrapperEle: HTMLElement = select('.e-file-select-wrap button', document) as HTMLElement;
        wrapperEle.click();
        args.preventDefault();
    }

        return (
            <div id='container'>
                <div id='dropArea'>
                    <span id='drop'> Drop files here or <a href="" id='browse' onClick={browseClick=browseClick.bind(this)}><u>Browse</u></a> </span>
                    <UploaderComponent asyncSettings={path}  ref = {upload => {uploadObj = upload!}} created={onCreated = onCreated.bind(this)}/>
                </div>
            </div>
        );
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

You can also explore React File Upload feature tour page for its groundbreaking features. You can also explore our React File Upload example to understand how to browse the files which you want to upload to the server.

See Also