Form support in React Uploader component

21 Feb 202624 minutes to read

The Uploader component integrates with HTML forms like standard file input elements. To use the Uploader within a form, set the following configuration:

saveUrl and removeUrl must be null
autoUpload must be false
name attribute must be set on the input element

When the form is submitted, selected or dropped files are sent as a collection to the form action. The form action handles server-side upload processing. Resetting the form clears both the file list and associated data.

[Class-component]

index.jsx
index.tsx
import { select } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class Validation extends React.Component {
    uploadObj;
    dialogInstance;
    formObject;
    animationSettings = { effect: 'Zoom' };
    floatFocus(args) {
        args.target.parentElement.classList.add('e-input-focus');
    }
    floatBlur(args) {
        args.target.parentElement.classList.remove('e-input-focus');
    }
    // Dialog will be closed, while clicking on overlay
    onOverlayClick() {
        this.dialogInstance.hide();
    }
    componentDidMount() {
        const options = {
            rules: {
                'email': {
                    required: [true, '* Enter your email']
                },
                'mobile': {
                    required: [true, '* Enter your mobile number']
                },
                'name': {
                    required: [true, '* Enter your name']
                },
                'upload': {
                    required: [true, '* Select any file']
                }
            }
        };
        this.formObject = new FormValidator('#form1', options);
    }
    onClick(args) {
        const wrapperEle = select('.e-file-select-wrap button', document);
        wrapperEle.click();
        args.preventDefault();
    }
    onSubmitClick() {
        if (this.formObject.validate()) {
            this.formObject.element.reset();
            this.dialogInstance.show();
        }
    }
    onFileSelected(args) {
        const inputElement = document.getElementById('upload');
        inputElement.value = args.filesData[0].name;
    }
    render() {
        return (<div className='control-pane'>
  <div className='control-section col-lg-12 uploadpreview'>
  <h4 className="form-title">Photo Contest</h4>
      <div className='upload_wrapper'>
      <div className="control_wrapper" id="control_wrapper">
        <form id="form1" method="post">
        <div className="form-group">
        <div className="e-float-input">
  <input type="text" id="name" name="name" onFocus={this.floatFocus} onBlur={this.floatBlur} data-msg-containerid="nameError"/>
  <span className="e-float-line"/>
  <label className="e-float-text e-label-top" htmlFor="name">Name</label>
        </div>
        <div id="nameError"/>
        </div>
        <div className="form-group">
        <div className="e-float-input">
        <input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
  <span className="e-float-line"/>
  <label className="e-float-text e-label-top" htmlFor="email">Email</label>
        </div>
        <div id="mailError"/>
        </div>
        <div className="form-group">
  <div className="e-float-input">
      <input type="text" id="mobileno" name="mobile" data-msg-containerid="noError"/>
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top" htmlFor="mobile">Mobile no</label>
  </div>
  <div id="noError"/>
        </div>
        <div className="form-group">
  <div className="e-float-input upload-area">
      <input type="text" readOnly={true} id="upload" name="upload" data-msg-containerid="uploadError"/>
      <button id="browse" className="e-control e-btn e-info" onClick={this.onClick}>Browse..</button>
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top">Choose a file</label>
  </div>
  <div id="uploadError"/>
      <UploaderComponent id='fileUpload' type='file' ref={upload => { this.uploadObj = upload; }} selected={this.onFileSelected = this.onFileSelected.bind(this)} autoUpload={false} allowedExtensions='image/*'/>
        </div>
        <div className="form-group">
  <div className="e-float-input">
      <textarea className="address-field" id="Address" name="Address"/>
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top">Address</label>
  </div>
        </div>
        </form>
    <div className="submitBtn">
          <button className="submit-btn e-btn" onClick={this.onSubmitClick = this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
      </div>
  <div id="confirmationDialog"/> </div>
        </div>
        </div>
  <DialogComponent id="defaultdialog" isModal={true} visible={false} content='Your details has been updated successfully, Thank you' animationSettings={this.animationSettings} width={'50%'} ref={dialog => this.dialogInstance = dialog} target={'.control-section'} overlayClick={this.onOverlayClick = this.onOverlayClick.bind(this)}/>
    </div>);
    }
}
ReactDOM.render(<Validation />, document.getElementById('fileupload'));
import { select } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { FormValidatorModel } from '@syncfusion/ej2-inputs';
import { SelectedEventArgs, UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class Validation extends React.Component<{}, {}> {
public uploadObj: UploaderComponent;
public dialogInstance: DialogComponent;
public formObject: FormValidator;
private animationSettings: object = { effect: 'Zoom' };
public floatFocus(args: React.FocusEvent): void {
  ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
}
public floatBlur(args: any): void {
    ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
}
  // Dialog will be closed, while clicking on overlay
  public onOverlayClick() {
        this.dialogInstance.hide();
  }
  public componentDidMount(): void {
        const options: FormValidatorModel = {
         rules: {
          'email': {
            required: [true, '* Enter your email']
          },
          'mobile': {
            required: [true, '* Enter your mobile number']
          },
          'name': {
              required: [true, '* Enter your name']
          },
          'upload': {
              required: [true, '* Select any file']
          }
        }
      };
      this.formObject = new FormValidator('#form1', options);
  }

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

  public onSubmitClick(): void {
  if(this.formObject.validate()) {
    this.formObject.element.reset();
    this.dialogInstance.show();
      }
  }

public onFileSelected(args: SelectedEventArgs) : void {
      const inputElement:HTMLInputElement = document.getElementById('upload') as HTMLInputElement;
      inputElement.value = args.filesData[0].name;
}
public render(): JSX.Element {
    return (    <div className = 'control-pane'>
  <div className='control-section col-lg-12 uploadpreview'>
  <h4 className="form-title">Photo Contest</h4>
      <div className='upload_wrapper'>
      <div className="control_wrapper" id="control_wrapper">
<form id="form1"  method="post">
<div className="form-group" >
<div className="e-float-input">
  <input type="text" id="name" name="name" onFocus= {this.floatFocus} onBlur= {this.floatBlur}  data-msg-containerid="nameError" />
  <span className="e-float-line"/>
  <label className="e-float-text e-label-top" htmlFor="name">Name</label>
</div>
<div id="nameError"/>
</div>
<div className="form-group">
<div className="e-float-input">
<input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
  <span className="e-float-line"/>
  <label className="e-float-text e-label-top" htmlFor="email" >Email</label>
</div>
<div id="mailError"/>
</div>
<div className="form-group" >
  <div className="e-float-input">
      <input type="text" id="mobileno" name="mobile" data-msg-containerid="noError" />
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top"  htmlFor="mobile" >Mobile no</label>
  </div>
  <div id="noError"/>
</div>
<div className="form-group" >
  <div className="e-float-input upload-area">
      <input type="text" readOnly={true} id="upload" name="upload" data-msg-containerid="uploadError"/>
      <button id="browse" className="e-control e-btn e-info" onClick={this.onClick}>Browse..</button>
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top">Choose a file</label>
  </div>
  <div id="uploadError"/>
      <UploaderComponent id='fileUpload' type = 'file' ref = {upload => {this.uploadObj = upload !}}
  selected={this.onFileSelected=this.onFileSelected.bind(this)}
  autoUpload = {false}
  allowedExtensions= 'image/*' />
</div>
<div className="form-group" >
  <div className="e-float-input">
      <textarea className="address-field" id="Address" name="Address"/>
      <span className="e-float-line"/>
      <label className="e-float-text e-label-top" >Address</label>
  </div>
</div>
</form>
    <div className="submitBtn">
          <button className="submit-btn e-btn" onClick={this.onSubmitClick = this.onSubmitClick.bind(this)} id="submit-btn">Submit</button>
      </div>
  <div id="confirmationDialog"/> </div>
</div>
</div>
  <DialogComponent id="defaultdialog" isModal={true} visible ={false} content = 'Your details has been updated successfully, Thank you' animationSettings={this.animationSettings} width={'50%'}  ref={dialog => this.dialogInstance = dialog!}
  target={'.control-section'} overlayClick={this.onOverlayClick=this.onOverlayClick.bind(this)} />
    </div>) }
}

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

[Functional-component]

index.jsx
index.tsx
import { select } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function Validation() {
    let uploadObj;
    let dialogInstance;
    let formObject;
    const animationSettings = { effect: 'Zoom' };
    function floatFocus(args) {
        args.target.parentElement.classList.add('e-input-focus');
    }
    function floatBlur(args) {
        args.target.parentElement.classList.remove('e-input-focus');
    }
    // Dialog will be closed, while clicking on overlay
    function onOverlayClick() {
        dialogInstance.hide();
    }
    React.useEffect(() => {
        const options = {
            rules: {
                'email': {
                    required: [true, '* Enter your email']
                },
                'mobile': {
                    required: [true, '* Enter your mobile number']
                },
                'name': {
                    required: [true, '* Enter your name']
                },
                'upload': {
                    required: [true, '* Select any file']
                }
            }
        };
        formObject = new FormValidator('#form1', options);
    }, []);
    function onClick(args) {
        const wrapperEle = select('.e-file-select-wrap button', document);
        wrapperEle.click();
        args.preventDefault();
    }
    function onSubmitClick() {
        if (formObject.validate()) {
            formObject.element.reset();
            dialogInstance.show();
        }
    }
    function onFileSelected(args) {
        const inputElement = document.getElementById('upload');
        inputElement.value = args.filesData[0].name;
    }
    return (<div className='control-pane'>
        <div className='control-section col-lg-12 uploadpreview'>
            <h4 className="form-title">Photo Contest</h4>
            <div className='upload_wrapper'>
                <div className="control_wrapper" id="control_wrapper">
                <form id="form1" method="post">
                    <div className="form-group">
                        <div className="e-float-input">
                            <input type="text" id="name" name="name" onFocus={floatFocus} onBlur={floatBlur} data-msg-containerid="nameError"/>
                            <span className="e-float-line"/>
                            <label className="e-float-text e-label-top" htmlFor="name">Name</label>
                        </div>
                    <div id="nameError"/>
                </div>
                <div className="form-group">
                    <div className="e-float-input">
                        <input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top" htmlFor="email">Email</label>
                    </div>
                    <div id="mailError"/>
                </div>
                <div className="form-group">
                    <div className="e-float-input">
                        <input type="text" id="mobileno" name="mobile" data-msg-containerid="noError"/>
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top" htmlFor="mobile">Mobile no</label>
                    </div>
                    <div id="noError"/>
                </div>
                <div className="form-group">
                    <div className="e-float-input upload-area">
                        <input type="text" readOnly={true} id="upload" name="upload" data-msg-containerid="uploadError"/>
                        <button id="browse" className="e-control e-btn e-info" onClick={onClick}>Browse..</button>
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top">Choose a file</label>
                    </div>
                    <div id="uploadError"/>
                        <UploaderComponent id='fileUpload' type='file' ref={upload => { uploadObj = upload; }} selected={onFileSelected = onFileSelected.bind(this)} autoUpload={false} allowedExtensions='image/*'/>
                    </div>
                    <div className="form-group">
                        <div className="e-float-input">
                            <textarea className="address-field" id="Address" name="Address"/>
                            <span className="e-float-line"/>
                            <label className="e-float-text e-label-top">Address</label>
                        </div>
                    </div>
                </form>
                <div className="submitBtn">
                    <button className="submit-btn e-btn" onClick={onSubmitClick = onSubmitClick.bind(this)} id="submit-btn">Submit</button>
                </div>
                <div id="confirmationDialog"/> </div>
            </div>
        </div>
        <DialogComponent id="defaultdialog" isModal={true} visible={false} content='Your details has been updated successfully, Thank you' animationSettings={animationSettings} width={'50%'} ref={dialog => dialogInstance = dialog} target={'.control-section'} overlayClick={onOverlayClick = onOverlayClick.bind(this)}/>
    </div>);
}
ReactDOM.render(<Validation />, document.getElementById('fileupload'));
import { select } from '@syncfusion/ej2-base';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { FormValidatorModel } from '@syncfusion/ej2-inputs';
import { SelectedEventArgs, UploaderComponent } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function Validation(){
let uploadObj: UploaderComponent;
let dialogInstance: DialogComponent;
let formObject: FormValidator;
const animationSettings: object = { effect: 'Zoom' };
function floatFocus(args: React.FocusEvent): void {
  ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
}
function floatBlur(args: any): void {
    ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
}
  // Dialog will be closed, while clicking on overlay
function onOverlayClick() {
      dialogInstance.hide();
}
React.useEffect(() => {
  const options: FormValidatorModel = {
        rules: {
        'email': {
          required: [true, '* Enter your email']
        },
        'mobile': {
          required: [true, '* Enter your mobile number']
        },
        'name': {
            required: [true, '* Enter your name']
        },
        'upload': {
            required: [true, '* Select any file']
        }
      }
    };
    formObject = new FormValidator('#form1', options);
}, []);

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

function onSubmitClick(): void {
    if(formObject.validate()) {
        formObject.element.reset();
        dialogInstance.show();
    }
}

function onFileSelected(args: SelectedEventArgs) : void {
    const inputElement:HTMLInputElement = document.getElementById('upload') as HTMLInputElement;
    inputElement.value = args.filesData[0].name;
}

return(
    <div className = 'control-pane'>
        <div className='control-section col-lg-12 uploadpreview'>
            <h4 className="form-title">Photo Contest</h4>
            <div className='upload_wrapper'>
                <div className="control_wrapper" id="control_wrapper">
                <form id="form1"  method="post">
                    <div className="form-group" >
                        <div className="e-float-input">
                            <input type="text" id="name" name="name" onFocus= {floatFocus} onBlur= {floatBlur}  data-msg-containerid="nameError" />
                            <span className="e-float-line"/>
                            <label className="e-float-text e-label-top" htmlFor="name">Name</label>
                        </div>
                    <div id="nameError"/>
                </div>
                <div className="form-group">
                    <div className="e-float-input">
                        <input type="email" id="Email" name="email" data-msg-containerid="mailError"/>
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top" htmlFor="email" >Email</label>
                    </div>
                    <div id="mailError"/>
                </div>
                <div className="form-group" >
                    <div className="e-float-input">
                        <input type="text" id="mobileno" name="mobile" data-msg-containerid="noError" />
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top"  htmlFor="mobile" >Mobile no</label>
                    </div>
                    <div id="noError"/>
                </div>
                <div className="form-group" >
                    <div className="e-float-input upload-area">
                        <input type="text" readOnly={true} id="upload" name="upload" data-msg-containerid="uploadError"/>
                        <button id="browse" className="e-control e-btn e-info" onClick={onClick}>Browse..</button>
                        <span className="e-float-line"/>
                        <label className="e-float-text e-label-top">Choose a file</label>
                    </div>
                    <div id="uploadError"/>
                        <UploaderComponent id='fileUpload' type = 'file' ref = {upload => {uploadObj = upload !}}
                        selected={onFileSelected=onFileSelected.bind(this)}
                        autoUpload = {false}
                        allowedExtensions= 'image/*' />
                    </div>
                    <div className="form-group" >
                        <div className="e-float-input">
                            <textarea className="address-field" id="Address" name="Address"/>
                            <span className="e-float-line"/>
                            <label className="e-float-text e-label-top" >Address</label>
                        </div>
                    </div>
                </form>
                <div className="submitBtn">
                    <button className="submit-btn e-btn" onClick={onSubmitClick = onSubmitClick.bind(this)} id="submit-btn">Submit</button>
                </div>
                <div id="confirmationDialog"/> </div>
            </div>
        </div>
        <DialogComponent id="defaultdialog" isModal={true} visible ={false} content = 'Your details has been updated successfully, Thank you' animationSettings={animationSettings} width={'50%'}  ref={dialog => dialogInstance = dialog!}
        target={'.control-section'} overlayClick={onOverlayClick=onOverlayClick.bind(this)} />
    </div>
    )
}
ReactDOM.render(<Validation />, 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.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Form support in React Uploader component