Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The file manager allows files or folders to be moved from one folder to another by using the allowDragAndDrop property. It also supports uploading a file by dragging it from Windows Explorer to FileManager control. You can enable or disable this support by using the allowDragAndDrop property of file manager.
The event triggered in drag and drop support are
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public ajaxSettings: object;
public allowDragAndDrop: boolean;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.allowDragAndDrop = true;
};
// File Manager's file drag start event function
onFileDragStart(args: any) {
console.log("File drag start");
}
// File Manager's file drag stop event function
onFileDragStop(args: any) {
console.log("File drag stop");
}
// File Manager's file dragging event function
onFileDragging(args: any) {
console.log("File dragging");
}
// File Manager's file dropped event function
onFileDropped(args: any) {
console.log("File dropped");
}
}import { AppComponent } from './app.component';
import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import 'rxjs/add/operator/map';
import { NgModule } from '@angular/core';
import { FileManagerModule,NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';
@NgModule({
imports: [FileManagerModule , HttpModule, JsonpModule, BrowserModule],
declarations: [AppComponent],
providers:[NavigationPaneService, ToolbarService, DetailsViewService],
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);<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [allowDragAndDrop]='allowDragAndDrop' (fileDragStart)='onFileDragStart($event)' (fileDragStop)='onFileDragStop($event)' (fileDragging)='onFileDragging($event)' (fileDropped)='onFileDropped($event)' >
</ejs-filemanager>