Search results

Sort the Selected Files in React Uploader component

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
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'));
#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%;
}