React Migration in File Upload Component

This section explains how to migrate the FileUpload component from EJ2 React to React. It provides a detailed comparison of APIs, including props and events.

Properties

EJ2 React	React	Description
Props: `allowedExtensions` `<UploaderComponent allowedExtensions=".jpg,.png"></UploaderComponent>`	Props: `accept` `<FileUpload accept=".jpg,.png"></FileUpload>`	The `allowedExtensions` in EJ2 React is replaced with the `accept` in React.
Props: `asyncSettings` `<UploaderComponent asyncSettings={{ saveUrl: 'https://example.com/save', removeUrl: 'https://example.com/remove' }}></UploaderComponent>`	Props: `saveUrl`, `removeUrl` `<FileUpload saveUrl="https://example.com/save" removeUrl="https://example.com/remove"></FileUpload>`	The `asyncSettings` in EJ2 React is split into top-level `saveUrl` and `removeUrl` in React.
Props: `autoUpload` `<UploaderComponent autoUpload={false}></UploaderComponent>`	Props: `autoUpload` `<FileUpload autoUpload={false}></FileUpload>`	The `autoUpload` is supported in both EJ2 React and React.
Props: `buttons` `<UploaderComponent buttons={{ browse: "Choose File", clear: "Clear All", upload: "Upload All" }}></UploaderComponent>`	Props: `children` with `<BrowseButton>`, `<ClearButton>`, `<UploadButton>` `<FileUpload> <BrowseButton>Choose File</BrowseButton> <Actions> <UploadButton>Upload All</UploadButton> <ClearButton>Clear All</ClearButton> </Actions> </FileUpload>`	The `buttons` in EJ2 React is replaced in React by composing the browse, upload, and clear buttons through the composition API using `<BrowseButton>`, `<UploadButton>`, and `<ClearButton>` child components.
Props: `cssClass` `<UploaderComponent cssClass="custom-uploader"></UploaderComponent>`	Props: `className` `<FileUpload className="custom-uploader"></FileUpload>`	The `cssClass` in EJ2 React is replaced with the standard React `className`.
Props: `directoryUpload` `<UploaderComponent directoryUpload={true}></UploaderComponent>`	Props: `directory` `<FileUpload directory={true}></FileUpload>`	The `directoryUpload` in EJ2 React is renamed to `directory` in React.
Props: `dropArea` `<UploaderComponent dropArea="#drop-zone"></UploaderComponent>`	Props: `dropArea` `const dropRef = useRef(null); <FileUpload dropArea={dropRef}></FileUpload>`	The `dropArea` is supported in both EJ2 React and React.
Props: `enableRtl` `<UploaderComponent enableRtl={true}></UploaderComponent>`	Props: `dir` `<Provider dir='rtl'> <FileUpload></FileUpload> </Provider>`	The `enableRtl` in EJ2 React is now provided through the standard `dir="rtl"` attribute in React.
Props: `files` `const preloadFiles = [ { name: 'Nature', size: 500000, type: '.png' }, { name: 'Document', size: 12000, type: '.pdf' }]; <UploaderComponent files={preloadFiles}></UploaderComponent>`	Props: `files` `const preloadFiles = [ { name: 'Nature', size: 500000, type: '.png' }, { name: 'Document', size: 12000, type: '.pdf' }]; <FileUpload files={preloadFiles}></FileUpload>`	The `files` is supported in both EJ2 React and React.
Props: `maxFileSize` `<UploaderComponent maxFileSize={5000000}></UploaderComponent>`	Props: `maxFileSize` `<FileUpload maxFileSize={5000000}></FileUpload>`	The `maxFileSize` is supported in both EJ2 React and React.
Props: `minFileSize` `<UploaderComponent minFileSize={1000}></UploaderComponent>`	Props: `minFileSize` `<FileUpload minFileSize={1000}></FileUpload>`	The `minFileSize` is supported in both EJ2 React and React.
Props: `multiple` `<UploaderComponent multiple={true}></UploaderComponent>`	Props: `multiple` `<FileUpload multiple={true}></FileUpload>`	The `multiple` is supported in both EJ2 React and React.
Props: `sequentialUpload` `<UploaderComponent sequentialUpload={true}></UploaderComponent>`	Props: `sequential` `<FileUpload sequential={true}></FileUpload>`	The `sequentialUpload` in EJ2 React is renamed to `sequential` in React.
Props: `showFileList` `<UploaderComponent showFileList={false}></UploaderComponent>`	Props: `children` with `<FileList>` `<FileUpload> <FileList></FileList> </FileUpload>`	The `showFileList` in EJ2 React is replaced in React by composing `<FileList>` as a child component, which renders the file list inside the `FileUpload`.
Props: `template` `<UploaderComponent template="<div class='file-row'>File Template</div>"></UploaderComponent>`	Props: `children` with `<FileList>` and render function `<FileUpload> <FileList> {(file) => <div className="file-row">File Template</div>} </FileList> </FileUpload>`	The `template` in EJ2 React is replaced in React by passing a render function as a child to `<FileList>`.

Events

EJ2 React	React	Description
Events: `actionComplete` `const onActionComplete = (args) => { console.log('All files processed:', args.fileData); }; <UploaderComponent actionComplete={onActionComplete.bind(this)}></UploaderComponent>`	Events: `onComplete` `const onComplete = (args) => { console.log('All files processed:', args.files); }; <FileUpload onComplete={onComplete}></FileUpload>`	The `actionComplete` in EJ2 React is replaced by `onComplete` in React.
Events: `canceling` `const onCanceling = (args) => { console.log('Upload canceled:', args.fileData); }; <UploaderComponent canceling={onCanceling.bind(this)}></UploaderComponent>`	Events: `onCancel` `const onCancel = (args) => { console.log('Upload canceled:', args.file); }; <FileUpload onCancel={onCancel}></FileUpload>`	The `canceling` in EJ2 React is replaced by `onCancel` in React.
Events: `change` `const onChange = (args) => { console.log('File list changed:', args.file); }; <UploaderComponent change={onChange.bind(this)}></UploaderComponent>`	Events: `onChange` `const handleChange = (args) => { console.log('File list changed:', args.files); }; <FileUpload onChange={handleChange}></FileUpload>`	The `change` in EJ2 React is replaced by `onChange` in React.
Events: `failure` `const onFailure = (args) => { console.log('Upload failed:', args.file); }; <UploaderComponent failure={onFailure.bind(this)}></UploaderComponent>`	Events: `onError` `const onError = (args) => { console.log('Upload failed:', args.file); }; <FileUpload onError={onError}></FileUpload>`	The `failure` in EJ2 React is replaced by `onError` in React.
Events: `pausing` `const onPausing = (args) => { console.log('Upload paused:', args.file); }; <UploaderComponent pausing={onPausing.bind(this)}></UploaderComponent>`	Events: `onPause` `const onPause = (args) => { console.log('Upload paused:', args.file); }; <FileUpload onPause={onPause}></FileUpload>`	The `pausing` in EJ2 React is replaced by `onPause` in React.
Events: `progress` `const onProgress = (args) => { console.log('Upload progress:', args.file); }; <UploaderComponent progress={onProgress.bind(this)}></UploaderComponent>`	Events: `onProgress` `const onProgress = (args) => { console.log('Upload progress:', args.percent); }; <FileUpload onProgress={onProgress}></FileUpload>`	The `progress` in EJ2 React is replaced by `onProgress` in React.
Events: `removing` `const onRemoving = (args) => { console.log('File removing:', args.file); }; <UploaderComponent removing={onRemoving.bind(this)}></UploaderComponent>`	Events: `onRemove` `const onRemove = (args) => { console.log('File removing:', args.file); }; <FileUpload onRemove={onRemove}></FileUpload>`	The `removing` in EJ2 React is replaced by `onRemove` in React.
Events: `resuming` `const onResuming = (args) => { console.log('Upload resumed:', args.file); }; <UploaderComponent resuming={onResuming.bind(this)}></UploaderComponent>`	Events: `onResume` `const onResume = (args) => { console.log('Upload resumed:', args.file); }; <FileUpload onResume={onResume}></FileUpload>`	The `resuming` in EJ2 React is replaced by `onResume` in React.
Events: `selected` `const onSelected = (args) => { console.log('Files selected:', args.filesData); }; <UploaderComponent selected={onSelected.bind(this)}></UploaderComponent>`	Events: `onSelect` `const onSelect = (args) => { console.log('Files selected:', args.files); }; <FileUpload onSelect={onSelect}></FileUpload>`	The `selected` in EJ2 React is replaced by `onSelect` in React.
Events: `success` `const onSuccess = (args) => { console.log('Upload success:', args.file); }; <UploaderComponent success={onSuccess.bind(this)}></UploaderComponent>`	Events: `onSuccess` `const onSuccess = (args) => { console.log('Upload success:', args.file); }; <FileUpload onSuccess={onSuccess}></FileUpload>`	The `success` in EJ2 React is replaced by `onSuccess` in React.
Events: `uploading` `const onUploading = (args) => { console.log('Upload started:', args.file); }; <UploaderComponent uploading={onUploading.bind(this)}></UploaderComponent>`	Events: `onStart` `const onStart = (args) => { console.log('Upload started:', args.file); }; <FileUpload onStart={onStart}></FileUpload>`	The `uploading` in EJ2 React is replaced by `onStart` in React.