You can sort the selected files in an uploader component by using the selected event. Refer to the following example.
import { Component, ViewChild } from '@angular/core';
import { UploaderComponent, SelectedEventArgs, FileInfo } from '@syncfusion/ej2-angular-inputs';
@Component({
selector: 'app-root',
templateUrl: 'default.html',
styleUrls: ['index.css']
})
export class AppComponent {
@ViewChild('defaultupload')
public uploadObj: UploaderComponent;
public path: Object = {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
};
public initial:boolean = true;
public onSelect(args: SelectedEventArgs): void {
if (this.initial) { this.initial = false; return; }
args.isModified = true;
let oldFiles: FileInfo[] = this.uploadObj.getFilesData();
let filesData: FileInfo[] = args.filesData.concat(oldFiles);
let modifiedData: FileInfo[] = this.sortFileList(filesData);
args.modifiedFilesData = modifiedData;
}
public sortFileList(filesData: FileInfo[]): FileInfo[] {
let files: FileInfo[] = filesData;
let fileNames: string[] = [];
for (let i: number = 0; i < files.length; i++) {
fileNames.push(files[i].name);
}
let sortedFileNames: string[] = fileNames.sort();
let sortedFilesData: FileInfo[] = [];
let index: number = 0;
for (let name of sortedFileNames) {
for (let i: number = 0; i < files.length; i++) {
if (name === files[i].name) {
sortedFilesData.push(files[i]);
}
}
}
return sortedFilesData;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, UploaderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="control-section">
<div class="col-lg-9">
<div class="control_wrapper">
<ejs-uploader #defaultupload id='fileupload' [asyncSettings]='path' (selected)='onSelect($event)'></ejs-uploader>
</div>
</div>
</div>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}