Upload in Angular File Manager component

12 Sep 202515 minutes to read

The Angular File Manager component provides a uploadSettings property with various options to customize how files are uploaded, including controlling file size, restricting file types, checking for excessively large and empty files, and enabling chunk uploads.

Directory Upload

The directoryUpload property controls whether users can browse and upload entire directories (folders) in the Syncfusion® Angular File Manager component.

To enable directory upload, set the directoryUpload property to true in the uploadSettings configuration.

When set to true, this property enables directory upload in the File Manager, allowing users to upload entire folders. If set to false, only individual files can be uploaded.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [uploadSettings]='uploadSettings'>
</ejs-filemanager>`
})

export class AppComponent {
  @ViewChild('fileObj')
  public fileObj?: FileManagerComponent;
  public ajaxSettings?: object;
  public uploadSettings?: object;
  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.uploadSettings = { directoryUpload: true };
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: When directoryUpload is set to true, only folders can be uploaded. When it is set to false, only individual files can be uploaded. The File Manager does not support simultaneous uploading of both files and folders in a single operation.

To learn more about the folder upload actions, refer to this link

Chunk Upload

The chunkSize property enables large file uploads by dividing files into smaller chunks that are uploaded sequentially to the server.

When the selected file size exceeds the specified chunkSize value, the file is automatically divided into multiple segments for upload. By default, chunk upload is disabled. Setting a value (in bytes) activates this feature.

Benefits of chunk upload include:

  • Reduced network load
  • Better upload reliability for large files
  • Pause and resume capability during uploads

In the following example, the chunkSize is set to 5 MB (5,242,880 bytes), and the maxFileSize is set to 70 MB (73,728,000 bytes). This means files that are up to 70 MB will be uploaded in 5 MB chunks.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [uploadSettings]='uploadSettings'>
</ejs-filemanager>`
})

export class AppComponent {
  @ViewChild('fileObj')
  public fileObj?: FileManagerComponent;
  public ajaxSettings?: object;
  public uploadSettings?: object;
  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'
    };
    // Upload settings customization
    this.uploadSettings = { chunkSize: 5242880, maxFileSize: 73728000 };
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

With chunk upload enabled, users gain access to pause and resume controls during the upload process, providing enhanced control over file uploads.

Angular File Manager with chunkUpload

Note:

  1. Chunk upload will only activate when the selected file size is greater than the specified chunk size. Otherwise, files will be uploaded normally.
  2. The pause and resume features are only available when chunk upload is enabled.

Auto Upload

The autoUpload property controls whether files are automatically uploaded when added to the upload queue.

The default value is true, the File Manager will automatically upload files as soon as they are added to the upload queue. If set to false, the files will not be uploaded automatically, giving you the chance to manipulate the files before uploading them to the server.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [uploadSettings]='uploadSettings'>
</ejs-filemanager>`
})

export class AppComponent {
  @ViewChild('fileObj')
  public fileObj?: FileManagerComponent;
  public ajaxSettings?: object;
  public uploadSettings?: object;
  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'
    };
    // Upload settings customization
    this.uploadSettings = { autoUpload: false };
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Auto Close

The autoClose property controls whether the upload dialog automatically closes after all the files have been uploaded.

The default value is set to false, the upload dialog remains open even after the upload process is complete. If autoClose set to true, the upload dialog will automatically close after all the files in the upload queue are uploaded.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';

/**
 * File Manager directory upload feature sample
 */

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [uploadSettings]='uploadSettings'>
</ejs-filemanager>`
})

export class AppComponent {
  @ViewChild('fileObj')
  public fileObj?: FileManagerComponent;
  public ajaxSettings?: object;
  public uploadSettings?: object;
  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'
    };
    // Upload settings customization
    this.uploadSettings = { autoClose: false };
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Prevent upload based on file extensions

The allowedExtensions property specifies which file types are allowed for upload in the File Manager component by defining their extensions.

By default, all file types are allowed. To restrict uploads to specific file types, provide a comma-separated list of file extensions (including the period). For example, to allow only image files, set allowedExtensions to .jpg,.png,.jpeg.

When users attempt to upload files with extensions not in the allowed list, those files will be rejected with an appropriate error message.

If you want to allow only image files like .jpg and .png, you would set the property as follows:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager';

@Component({
  imports: [FileManagerModule],
  providers: [NavigationPaneService, ToolbarService, DetailsViewService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-filemanager id='file-manager' [ajaxSettings]='ajaxSettings' [uploadSettings]='uploadSettings'>
</ejs-filemanager>`
})

export class AppComponent {
  @ViewChild('fileObj')
  public fileObj?: FileManagerComponent;
  public ajaxSettings?: object;
  public uploadSettings?: object;
  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'
    };
    // Upload settings customization
    this.uploadSettings = { allowedExtensions: '.jpg,.png' };
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Restrict drag and drop upload

The File Manager component supports external drag-and-drop functionality that allows uploading files by dragging them from the local file system directly into the File Manager interface.

There are two separate drag-and-drop behaviors that can be controlled:

  1. Internal drag-and-drop within the File Manager (controlled by the allowDragAndDrop property)
  2. External drag-and-drop from outside the File Manager (controlled by the uploader’s dropArea property)

To disable external drag-and-drop uploads completely, you need to set the dropArea property to null using the File Manager instance methods, as shown in the example below:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule,ViewChild } from '@angular/core'
import { FileManagerComponent, FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';

@Component({
    imports: [FileManagerModule],
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `<ejs-filemanager #fileManagerInstance id='file-manager' [ajaxSettings]='ajaxSettings' (created)="onCreated()" height="375px">
</ejs-filemanager>`
})
export class AppComponent {
    @ViewChild('fileManagerInstance')
    public fileManagerInstance?: FileManagerComponent;
    public ajaxSettings?: object;
    public uploadSettings?: object;
    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'
        };
    };
    onCreated() {
        if(this.fileManagerInstance){
            this.fileManagerInstance.uploadObj.dropArea = '';  // Restrict file uploads by dragging them from the local file system to the File Manager.
        }
    }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: Setting the allowDragAndDrop property to false only prevents drag-and-drop operations within the File Manager itself (such as moving files between folders). It does not prevent external drag-and-drop uploads. To disable external drag-and-drop uploads, you must set the dropArea property to null as shown in the example.

See also