Validate image on drop in React Uploader component

30 Jan 20238 minutes to read

The uploader component allows you to upload all type of images by setting *image/ ** to allowedExtensions property.

By default, the behavior is working with select a file using browse button. But, this behavior doesn’t support on drag and drop the files. You can handle this behavior manually using selected event by filtering the file types from application.

In the following example, validated image files using images/*. You are able to drag and drop the image files with extension of PNG, JPG, BPG, GIF and TIFF to upload it.

index.jsx

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();
    }
    onSelected(args) {
        if (args.event.type === 'drop') {
            const allImages = ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'bpg'];
            const files = args.filesData;
            const modifiedFiles = [];
            for (const file of files) {
                if (allImages.indexOf(file.type) === -1) {
                    file.status = 'File type is not allowed';
                    file.statusCode = '0';
                }
                modifiedFiles.push(file);
            }
            args.isModified = true;
        }
    }
    render() {
        return (<div className='control-pane' ref={dropAreaEle => this.dropAreaRef = dropAreaEle}>
                <div className='control-section row uploadpreview'>
                <div className='col-lg-9'>
                <div className='upload_wrapper'>
                    {/* Render Uploader */}
                    <UploaderComponent id='fileUpload' autoUpload={false} type='file' ref={upload => { this.uploadObj = upload; }} asyncSettings={this.path} selected={this.onSelected = this.onSelected.bind(this)} created={this.onCreated = this.onCreated.bind(this)}/>
                </div>
                </div>
                </div>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { 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'
  }
  private dropAreaRef: HTMLElement;
  public onCreated(): void {
      this.uploadObj.dropArea = this.dropAreaRef;
      this.uploadObj.dataBind();
  }
  public onSelected(args: SelectedEventArgs): void {
    if (args.event.type === 'drop') {
        const allImages = ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'bpg'];
        const files = args.filesData;
        const modifiedFiles = [];
        for (const file of files) {
            if (allImages.indexOf(file.type) === -1) {
                file.status = 'File type is not allowed';
                file.statusCode = '0';
            }
            modifiedFiles.push(file);
        }
        args.isModified = true;
    }
  }
  public render(): JSX.Element {
        return (
            <div className = 'control-pane' ref={dropAreaEle => this.dropAreaRef = dropAreaEle!}>
                <div className='control-section row uploadpreview'>
                <div className='col-lg-9'>
                <div className='upload_wrapper'>
                    {/* Render Uploader */}
                    <UploaderComponent id='fileUpload' autoUpload = {false} type='file' ref = {upload => {this.uploadObj = upload !}}
                    asyncSettings = {this.path}
                    selected={ this.onSelected = this.onSelected.bind(this)} created={this.onCreated = this.onCreated.bind(this)} />
                </div>
                </div>
                </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.