How to customize the File Upload in React?

3 mins read

Syncfusion provides a powerful File Upload component that can be easily integrated into React applications. This article outlines how to customize the File Upload component to meet specific requirements.

Installation

To get started, ensure you have the Syncfusion React File Upload package installed. You can do this using npm:

npm install @syncfusion/ej2-react-inputs

Basic Usage

First, import the necessary components in your React file:

import React from 'react';
import { FileUploadComponent } from '@syncfusion/ej2-react-inputs';

Then, you can use the FileUploadComponent in your render method:

const App = () => {
    return (
        <div>
            <FileUploadComponent />
        </div>
    );
};

export default App;

Customizing the File Upload Component

1. Setting Allowed File Types

You can restrict the types of files that can be uploaded by using the accept property. For example, to allow only image files:

<FileUploadComponent accept='image/*' />

2. Customizing the Upload Button

To customize the upload button, you can use the buttonText property:

<FileUploadComponent buttonText='Upload Your Files' />

3. Adding a Custom Template

You can create a custom template for the file upload component. This allows you to design the UI according to your needs. Use the template property to specify your custom template.

uploaderTemplate(data) {
        return (<div>
            <span className='wrapper'>
                <span className={'icon template-icons sf-icon-${data.type}'}/>
                <span className='name file-name'>{data.name}</span>
            </span>
                <span className='file-size-td file-size'>{data.size} bytes</span>
                <span className='e-icons e-file-remove-btn' title='Remove'/> <br />
                <progress id='progressBar' className='progressbar' value='0' max='100'/>
                <span className='percent-td percent'/>
            </div>);
    }

4. Handling Events

You can handle various events such as success, failure, and change to manage the file upload process effectively. For example:

const onSuccess = (args) => {
    console.log('File uploaded successfully:', args);
};

<FileUploadComponent success={onSuccess} />

5. Styling the Component

You can apply custom styles to the File Upload component using CSS. For instance:

.e-file-upload {
    border: 2px dashed #007bff;
    padding: 20px;
    text-align: center;
}

Conclusion

I hope you enjoyed learning about how to customize the File Upload in React.

You can refer to our React File Upload feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React File Upload example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)