How can I help you?
Validation in React Uploader component
21 Feb 202624 minutes to read
The Uploader component validates selected files by size and extension using the allowedExtensions, minFileSize, and maxFileSize properties. Files are validated before uploading to the server, allowing invalid files to be excluded from the upload process. Validation can also be configured using HTML attributes on the input element. The validation process runs automatically when files are selected, dropped, or pasted.
File type
The allowedExtensions property restricts uploads to specific file types by comma-separated extensions. The Uploader component filters selected or dropped files against the specified file types and processes only matching files. Validation also occurs when the accept attribute is set on the input element.
[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 {
// Uploader 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} allowedExtensions='.doc, .docx, .xls, .xlsx'/>);
}
}
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<{}, {}> {
// Uploader 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}
allowedExtensions='.doc, .docx, .xls, .xlsx'/>
);
}
}
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() {
// Uploader component
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} allowedExtensions='.doc, .docx, .xls, .xlsx'/>);
}
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(){
// Uploader component
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}
allowedExtensions='.doc, .docx, .xls, .xlsx'/>
);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));File size
The Uploader component validates file size to prevent uploading files that are too large or empty. File sizes are specified in bytes. By default, the component allows a minimum file size of 0 bytes and a maximum file size of 28.4 MB, configurable using the minFileSize and maxFileSize properties respectively.
[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 {
// Uploader 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} minFileSize={10000} maxFileSize={28400000}/>);
}
}
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<{}, {}> {
// Uploader 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} minFileSize = {10000} maxFileSize= {28400000}
/>
)
}
}
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() {
// Uploader component
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} minFileSize={10000} maxFileSize={28400000}/>);
}
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() {
// Uploader component
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} minFileSize = {10000} maxFileSize= {28400000}
/>
)
}
ReactDOM.render(<App />, document.getElementById('fileupload'));Maximum files count
Limit the number of files uploaded simultaneously by using the selected event. The event provides access to currently selected file details via getFilesData(). Modify the file list as needed and assign it to eventArgs.modifiedFilesData to control which files proceed to upload.
[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 {
uploadObj;
path = {
removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
};
onFileSelected(args) {
args.filesData.splice(5);
const filesData = this.uploadObj.getFilesData();
const allFiles = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (const i of allFiles) {
if (i.length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
render() {
return (<UploaderComponent asyncSettings={this.path} selected={this.onFileSelected = this.onFileSelected.bind(this)} ref={upload => { this.uploadObj = upload; }}/>);
}
}
ReactDOM.render(<App />, document.getElementById('fileupload'));import {FileInfo, SelectedEventArgs, 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'
}
public onFileSelected(args : SelectedEventArgs) : void {
args.filesData.splice(5);
const filesData : FileInfo[] = this.uploadObj.getFilesData();
const allFiles : FileInfo[] = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (const i of allFiles) {
if ((i as any).length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
public render(): JSX.Element{
return (
<UploaderComponent asyncSettings = {this.path} selected={this.onFileSelected = this.onFileSelected.bind(this)} ref = {upload => {this.uploadObj = upload !}} />);
}
}
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() {
let uploadObj;
const path = {
removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
};
function onFileSelected(args) {
args.filesData.splice(5);
const filesData = this.uploadObj.getFilesData();
const allFiles = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (const i of allFiles) {
if (i.length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
return (<UploaderComponent asyncSettings={path} selected={this.onFileSelected = onFileSelected.bind(this)} ref={upload => { this.uploadObj = upload; }}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));import {FileInfo, SelectedEventArgs, 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'
}
function onFileSelected(args : SelectedEventArgs) : void {
args.filesData.splice(5);
const filesData : FileInfo[] = uploadObj.getFilesData();
const allFiles : FileInfo[] = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (const i of allFiles) {
if ((i as any).length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
return (
<UploaderComponent asyncSettings = {path} selected={onFileSelected = onFileSelected.bind(this)} ref = {upload => {uploadObj = upload !}} />);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));Duplicate files
Prevent duplicate file uploads by using the selected event to compare new selections against existing files. Filter the file list to exclude duplicates before the upload process begins.
[Class-component]
import { isNullOrUndefined } 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'
};
onFileSelected(args) {
let existingFiles = this.uploadObj.getFilesData();
for (let i = 0; i < args.filesData.length; i++) {
for (const j of existingFiles) {
if (!isNullOrUndefined(args.filesData[i])) {
if (j.name === args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
args.isModified = true;
}
render() {
return (<UploaderComponent asyncSettings={this.path} selected={this.onFileSelected = this.onFileSelected.bind(this)} ref={upload => { this.uploadObj = upload; }}/>);
}
}
ReactDOM.render(<App />, document.getElementById('fileupload'));import { isNullOrUndefined } from '@syncfusion/ej2-base';
import {FileInfo, SelectedEventArgs, 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'
}
public onFileSelected(args : SelectedEventArgs) : void {
let existingFiles: FileInfo[] = this.uploadObj.getFilesData();
for (let i: number = 0; i < args.filesData.length; i++) {
for(const j of existingFiles) {
if (!isNullOrUndefined(args.filesData[i])) {
if (j.name === args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
args.isModified = true;
}
public render(): JSX.Element{
return (
<UploaderComponent asyncSettings = {this.path} selected={this.onFileSelected = this.onFileSelected.bind(this)} ref = {upload => {this.uploadObj = upload !}} />);
}
}
ReactDOM.render(<App />, document.getElementById('fileupload'));[Functional-component]
import { isNullOrUndefined } 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'
};
function onFileSelected(args) {
let existingFiles = this.uploadObj.getFilesData();
for (let i = 0; i < args.filesData.length; i++) {
for (const j of existingFiles) {
if (!isNullOrUndefined(args.filesData[i])) {
if (j.name === args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
args.isModified = true;
}
return (<UploaderComponent asyncSettings={path} selected={onFileSelected = onFileSelected.bind(this)} ref={upload => { uploadObj = upload; }}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));import { isNullOrUndefined } from '@syncfusion/ej2-base';
import {FileInfo, SelectedEventArgs, 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'
}
function onFileSelected(args : SelectedEventArgs) : void {
let existingFiles: FileInfo[] = this.uploadObj.getFilesData();
for (let i: number = 0; i < args.filesData.length; i++) {
for(const j of existingFiles) {
if (!isNullOrUndefined(args.filesData[i])) {
if (j.name === args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
args.isModified = true;
}
return (
<UploaderComponent asyncSettings = {path} selected={onFileSelected = onFileSelected.bind(this)} ref = {upload => {uploadObj = upload !}} />);
}
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.