Search results

Sort the Selected Files in React Uploader component

22 Jul 2021 / 2 minutes to read

You can sort the selected files in an uploader component by using the selected event. Refer to the following example.

In the following example, explains about how to sort the file list in uploader component.

Source
Preview
index.tsx
style.css
Copied to clipboard
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 initial: boolean = true;
  public path: object = {
      removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',
      saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save'
  }
  private dropAreaRef: HTMLElement;
  public onCreated(): void {
      this.uploadObj.dropArea = this.dropAreaRef;
      this.uploadObj.dataBind();
  }
public onSelect(args: SelectedEventArgs): void {
    if (this.initial) { this.initial = false; return; }
    args.isModified = true;
    const oldFiles: FileInfo[] = this.uploadObj.getFilesData();
    const filesData: FileInfo[] = args.filesData.concat(oldFiles);
    const modifiedData: FileInfo[] = this.sortFileList(filesData);
    args.modifiedFilesData = modifiedData;
}

public sortFileList(filesData: FileInfo[]): FileInfo[] {
    const files: FileInfo[] = filesData;
    const fileNames: string[] = [];
    for (const i of files) {
        fileNames.push(i.name);
    }
    const sortedFileNames: string[] = fileNames.sort();
    const sortedFilesData: FileInfo[] = [];
    for (const name of sortedFileNames) {
        for (const i of files) {
            if (name === i.name) {
                sortedFilesData.push(i);
            }
        }
    }
    return sortedFilesData;
}
  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' id="container">
      <div id='preview'/>
          {/* Render Uploader */}
          <UploaderComponent id='fileUpload' type='file' ref = {upload => {this.uploadObj = upload !}}
          asyncSettings = {this.path}
          selected={this.onSelect=this.onSelect.bind(this)} created={this.onCreated = this.onCreated.bind(this)}/>
      </div>
      </div>
      </div>
  </div>);
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));
Copied to clipboard
#container {
margin: 0 auto;
width: 400px;
}
  
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}

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.