Angular File Uploader - Chunk Upload

This demo shows how to upload files in chunks. The chunkSize property specifies their size (in this case, 0.2MB). You should ensure the server can process chunks. See an example of the server implementation under the FileUploaderController tab in the ASP.NET MVC version of this demo.

Backend API

<dx-file-uploader name="file" accept="image/*" uploadUrl="https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/ChunkUpload" [chunkSize]="200000" (onUploadStarted)="onUploadStarted()" (onProgress)="onUploadProgress($event)" > </dx-file-uploader> <span class="note" >Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span > <span class="note">Maximum file size: <span>4 MB.</span></span> <div class="chunk-panel"> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxFileUploaderModule } from 'devextreme-angular'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxFileUploaderModule, ], }) export class AppComponent { onUploadStarted() { this.getChunkPanel().innerHTML = ''; } onUploadProgress(e) { this.getChunkPanel().appendChild(this.addChunkInfo(e.segmentSize, e.bytesLoaded, e.bytesTotal)); } addChunkInfo(segmentSize, loaded, total) { const result = document.createElement('DIV'); result.appendChild(this.createSpan('Chunk size:')); result.appendChild(this.createSpan(this.getValueInKb(segmentSize), 'segment-size')); result.appendChild(this.createSpan(', Uploaded:')); result.appendChild(this.createSpan(this.getValueInKb(loaded), 'loaded-size')); result.appendChild(this.createSpan('/')); result.appendChild(this.createSpan(this.getValueInKb(total), 'total-size')); return result; } getValueInKb(value) { return `${(value / 1024).toFixed(0)}kb`; } createSpan(text, className = null) { const result = document.createElement('SPAN'); if (className) { result.className = className; } result.innerText = text; return result; } getChunkPanel() { return document.querySelector('.chunk-panel'); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .chunk-panel { width: 505px; height: 165px; overflow-y: auto; padding: 18px; margin-top: 40px; background-color: rgba(191, 191, 191, 0.15); } ::ng-deep .segment-size, ::ng-deep .loaded-size { margin-left: 3px; color: var(--dx-color-primary); } ::ng-deep .total-size { color: var(--dx-color-primary); } ::ng-deep .note { display: block; font-size: 10pt; color: var(--dx-texteditor-color-label); margin-left: 9px; } ::ng-deep .note > span { font-weight: 700; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>