React

Search results

File Source in React Uploader component

01 Dec 2022 / 7 minutes to read

Paste to upload

The uploader component allows you to upload the files using the select or drop files option from the file explorer. It also supports pasting to upload the image files. You can upload any currently copied images in the clipboard.

When you paste the image, it will be saved in the server with the filename as image.png. The file name can be renamed in the server end. You can generate a random name for the file name using getUniqueID method. Refer to the following example.

[class-component]

Source

Preview

index.jsx

index.tsx

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 {
    constructor() {
        super(...arguments);
        this.path = {
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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]

Source

Preview

index.jsx

index.tsx

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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

The uploader component allows you to upload all files in the folders to server by using the directoryUpload property. When this property is enabled, the uploader component processes the files by iterating through the files and sub-directories in a directory. It allows you to select only folders instead of files to upload.

The directory upload is available only in browsers that supports HTML5 directory. The uploader will process directory upload by dragging and dropping in the Edge browser. Refer to the following example to upload files to the server.

[Class-component]

Source

Preview

index.jsx

index.tsx

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 {
    constructor() {
        super(...arguments);
        this.path = {
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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://ej2.syncfusion.com/services/api/uploadbox/Remove',
    saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
  }
  public render(): JSX.Element {
    return (
        <UploaderComponent asyncSettings={this.path} directoryUpload={true} />);
  }
}

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

[Functional-component]

Source

Preview

index.jsx

index.tsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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://ej2.syncfusion.com/services/api/uploadbox/Remove',
    saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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

The uploader component allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area. By default, the uploader component act as drop area element. The drop area gets highlighted when you drag the files over drop area.

Custom drop area

The uploader component allows you to set external target element as drop area using the dropArea property. The element can be represented as HTML element or element’s id.

[Class-component]

Source

Preview

index.jsx

style.css

index.tsx

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 {
    constructor() {
        super(...arguments);
        this.path = {
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
        };
    }
    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'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  .fileupload {
    margin: 20px auto;
    width: 400px;
  }
  #droparea {
    padding: 50px 25px;
    margin: 30px auto;
    border: 1px solid #c3c3c3;
    text-align: center;
    width: 20%;
    display: inline-flex;
  }
  .e-file-select,
  .e-file-drop {
    display: none;
  }
  body .e-upload-drag-hover {
    outline: 2px dashed brown;
  }
  #uploadfile {  
    width: 60%;
    display: inline-flex;
    margin-left: 5%;
  }

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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]

Source

Preview

index.jsx

style.css

index.tsx

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
  .fileupload {
    margin: 20px auto;
    width: 400px;
  }
  #droparea {
    padding: 50px 25px;
    margin: 30px auto;
    border: 1px solid #c3c3c3;
    text-align: center;
    width: 20%;
    display: inline-flex;
  }
  .e-file-select,
  .e-file-drop {
    display: none;
  }
  body .e-upload-drag-hover {
    outline: 2px dashed brown;
  }
  #uploadfile {  
    width: 60%;
    display: inline-flex;
    margin-left: 5%;
  }

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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

You can customize the appearance of drop area by overriding the default drop area styles. The class “” and “” is available to handle this customization.

[Class-component]

Source

Preview

index.jsx

style.css

index.tsx

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 {
    constructor() {
        super(...arguments);
        this.path = {
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
        };
    }
    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'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.e-file-select-wrap {
    display: none;
}
#dropArea .e-upload {
    border: 0;
    margin-top: 15px;
}
#drop {
    padding-left: 30%;
}
#dropArea {
    min-height: 18px;
    border: 1px dashed #c3c3cc;
    padding-top: 15px;
    margin: 20px auto;
    width: 400px;
    height: auto; 
    overflow: auto
}

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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]

Source

Preview

index.jsx

style.css

index.tsx

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
.e-file-select-wrap {
    display: none;
}
#dropArea .e-upload {
    border: 0;
    margin-top: 15px;
}
#drop {
    padding-left: 30%;
}
#dropArea {
    min-height: 18px;
    border: 1px dashed #c3c3cc;
    padding-top: 15px;
    margin: 20px auto;
    width: 400px;
    height: auto; 
    overflow: auto
}

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://ej2.syncfusion.com/services/api/uploadbox/Remove',
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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.

File Source in React Uploader component

Paste to upload

Save action for Paste upload

Directory upload

Save action for directory upload

Drag and drop

Custom drop area

Customize drop area

See Also