Skip to content

Commit 2d42a4e

Browse files
Quentigusevilaliv3
Quentigus
authored and
evilaliv3
committed
new v17 demo (standalone)
1 parent dbaca94 commit 2d42a4e

23 files changed

+195
-345
lines changed

‎angular.json‎

Lines changed: 88 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -6,113 +6,6 @@
66
"version": 1,
77
"newProjectRoot": "projects",
88
"projects": {
9-
"ngx-flow-demo": {
10-
"root": "",
11-
"sourceRoot": "src",
12-
"projectType": "application",
13-
"prefix": "app",
14-
"schematics": {},
15-
"architect": {
16-
"build": {
17-
"builder": "@angular-devkit/build-angular:browser",
18-
"options": {
19-
"outputPath": "dist/ngx-flow-demo",
20-
"index": "src/index.html",
21-
"main": "src/main.ts",
22-
"polyfills": "src/polyfills.ts",
23-
"tsConfig": "src/tsconfig.app.json",
24-
"assets": [
25-
"src/favicon.ico",
26-
"src/assets"
27-
],
28-
"styles": [
29-
"src/styles.css"
30-
],
31-
"scripts": []
32-
},
33-
"configurations": {
34-
"production": {
35-
"fileReplacements": [
36-
{
37-
"replace": "src/environments/environment.ts",
38-
"with": "src/environments/environment.prod.ts"
39-
}
40-
],
41-
"optimization": false,
42-
"outputHashing": "all",
43-
"sourceMap": true,
44-
"namedChunks": false,
45-
"aot": false,
46-
"extractLicenses": true,
47-
"vendorChunk": false,
48-
"buildOptimizer": false
49-
},
50-
"development": {
51-
"fileReplacements": [
52-
{
53-
"replace": "src/environments/environment.ts",
54-
"with": "src/environments/environment.prod.ts"
55-
}
56-
],
57-
"optimization": false,
58-
"outputHashing": "all",
59-
"sourceMap": true,
60-
"namedChunks": false,
61-
"aot": false,
62-
"extractLicenses": true,
63-
"vendorChunk": false,
64-
"buildOptimizer": false
65-
}
66-
}
67-
},
68-
"serve": {
69-
"builder": "@angular-devkit/build-angular:dev-server",
70-
"options": {
71-
"buildTarget": "ngx-flow-demo:build"
72-
},
73-
"configurations": {
74-
"production": {
75-
"buildTarget": "ngx-flow-demo:build:browser"
76-
}
77-
}
78-
},
79-
"extract-i18n": {
80-
"builder": "@angular-devkit/build-angular:extract-i18n",
81-
"options": {
82-
"buildTarget": "ngx-flow-demo:build"
83-
}
84-
},
85-
"test": {
86-
"builder": "@angular-devkit/build-angular:karma",
87-
"options": {
88-
"main": "src/test.ts",
89-
"polyfills": "src/polyfills.ts",
90-
"tsConfig": "src/tsconfig.spec.json",
91-
"karmaConfig": "src/karma.conf.js",
92-
"styles": [
93-
"src/styles.css"
94-
],
95-
"scripts": [],
96-
"assets": [
97-
"src/favicon.ico",
98-
"src/assets"
99-
]
100-
}
101-
},
102-
"lint": {
103-
"builder": "@angular-devkit/build-angular:tslint",
104-
"options": {
105-
"tsConfig": [
106-
"src/tsconfig.app.json",
107-
"src/tsconfig.spec.json"
108-
],
109-
"exclude": [
110-
"**/node_modules/**"
111-
]
112-
}
113-
}
114-
}
115-
},
1169
"ngx-flow": {
11710
"projectType": "library",
11811
"root": "projects/ngx-flow",
@@ -143,6 +36,94 @@
14336
}
14437
}
14538
}
39+
},
40+
"ngx-flow-demo": {
41+
"projectType": "application",
42+
"schematics": {},
43+
"root": "projects/ngx-flow-demo",
44+
"sourceRoot": "projects/ngx-flow-demo/src",
45+
"prefix": "app",
46+
"architect": {
47+
"build": {
48+
"builder": "@angular-devkit/build-angular:application",
49+
"options": {
50+
"outputPath": "dist/ngx-flow-demo",
51+
"index": "projects/ngx-flow-demo/src/index.html",
52+
"browser": "projects/ngx-flow-demo/src/main.ts",
53+
"polyfills": [
54+
"zone.js"
55+
],
56+
"tsConfig": "projects/ngx-flow-demo/tsconfig.app.json",
57+
"assets": [
58+
"projects/ngx-flow-demo/src/favicon.ico",
59+
"projects/ngx-flow-demo/src/assets"
60+
],
61+
"styles": [
62+
"projects/ngx-flow-demo/src/styles.css"
63+
],
64+
"scripts": []
65+
},
66+
"configurations": {
67+
"production": {
68+
"budgets": [
69+
{
70+
"type": "initial",
71+
"maximumWarning": "500kb",
72+
"maximumError": "1mb"
73+
},
74+
{
75+
"type": "anyComponentStyle",
76+
"maximumWarning": "2kb",
77+
"maximumError": "4kb"
78+
}
79+
],
80+
"outputHashing": "all"
81+
},
82+
"development": {
83+
"optimization": false,
84+
"extractLicenses": false,
85+
"sourceMap": true
86+
}
87+
},
88+
"defaultConfiguration": "production"
89+
},
90+
"serve": {
91+
"builder": "@angular-devkit/build-angular:dev-server",
92+
"configurations": {
93+
"production": {
94+
"buildTarget": "ngx-flow-demo:build:production"
95+
},
96+
"development": {
97+
"buildTarget": "ngx-flow-demo:build:development"
98+
}
99+
},
100+
"defaultConfiguration": "development"
101+
},
102+
"extract-i18n": {
103+
"builder": "@angular-devkit/build-angular:extract-i18n",
104+
"options": {
105+
"buildTarget": "ngx-flow-demo:build"
106+
}
107+
},
108+
"test": {
109+
"builder": "@angular-devkit/build-angular:karma",
110+
"options": {
111+
"polyfills": [
112+
"zone.js",
113+
"zone.js/testing"
114+
],
115+
"tsConfig": "projects/ngx-flow-demo/tsconfig.spec.json",
116+
"assets": [
117+
"projects/ngx-flow-demo/src/favicon.ico",
118+
"projects/ngx-flow-demo/src/assets"
119+
],
120+
"styles": [
121+
"projects/ngx-flow-demo/src/styles.css"
122+
],
123+
"scripts": []
124+
}
125+
}
126+
}
146127
}
147128
}
148129
}

src/app/app.component.css renamed to projects/ngx-flow-demo/src/app/app.component.css

File renamed without changes.

‎projects/ngx-flow-demo/src/app/app.component.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<h1>ngx-flow example</h1>
2+
<p>
3+
To see how files are being uploaded to the server you need to run this example along with <a href="">a flowjs server</a>.
4+
</p>
5+
6+
<p>
7+
@if (flow?.flowJs?.support) {
8+
✅ FlowJS is supported by your browser
9+
}
10+
@else {
11+
🛑 FlowJS is NOT supported by your browser
12+
}
13+
</p>
14+
15+
<ng-container #flow="flow" [flowConfig]="{target: 'http://localhost:3000/upload'}"></ng-container>
16+
17+
<input type="file"
18+
flowButton
19+
[flow]="flow.flowJs"
20+
[flowAttributes]="{accept: 'image/*'}">
21+
22+
<div class="drop-area"
23+
flowDrop
24+
[flow]="flow.flowJs">
25+
Drop a file here
26+
</div>
27+
28+
<button type="button" (click)="flow.upload()" [disabled]="!(flow.somethingToUpload$ | async)">Start upload</button>
29+
<button type="button" (click)="flow.cancel()" [disabled]="!(flow.transfers$ | async)?.transfers?.length">Cancel all</button>
30+
Total progress: {{(flow.transfers$ | async)?.totalProgress | percent}}
31+
32+
<div class="transfers">
33+
34+
@for (transfer of (flow.transfers$ | async)?.transfers; track transfer.id) {
35+
<div class="transfer" [ngClass]="{'transfer--error': transfer.error, 'transfer--success': transfer.success}">
36+
<div class="name">name: {{transfer.name}}</div>
37+
<div>progress: {{transfer.progress | percent}}</div>
38+
<div>size: {{transfer.size | number: '1.0'}} bytes</div>
39+
<div>current speed: {{transfer.currentSpeed | number: '1.0'}} bytes/s</div>
40+
<div>average speed: {{transfer.averageSpeed | number: '1.0'}} bytes/s</div>
41+
<div>time ramining: {{transfer.timeRemaining}}s</div>
42+
<div>paused: {{transfer.paused}}</div>
43+
<div>success: {{transfer.success}}</div>
44+
<div>complete: {{transfer.complete}}</div>
45+
<div>error: {{transfer.error}}</div>
46+
47+
<img [flowSrc]="transfer">
48+
49+
<button (click)="flow.pauseFile(transfer)">pause</button>
50+
<button (click)="flow.resumeFile(transfer)">resume</button>
51+
<button (click)="flow.cancelFile(transfer)">cancel</button>
52+
</div>
53+
}
54+
55+
</div>

src/app/app.component.ts renamed to projects/ngx-flow-demo/src/app/app.component.ts

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
import {
2-
Component,
3-
ChangeDetectionStrategy,
4-
ViewChild,
5-
AfterViewInit,
6-
OnDestroy,
7-
ChangeDetectorRef,
8-
TrackByFunction
9-
} from '@angular/core';
10-
import { Transfer } from 'projects/ngx-flow/src/public_api';
11-
import { FlowDirective } from 'projects/ngx-flow/src/lib/flow.directive';
1+
import { AsyncPipe, PercentPipe, DecimalPipe, NgClass} from '@angular/common';
2+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
3+
import { FlowDirective, NgxFlowModule } from '@flowjs/ngx-flow';
124
import { Subscription } from 'rxjs';
135

146
@Component({
157
selector: 'app-root',
8+
standalone: true,
9+
imports: [
10+
NgClass, DecimalPipe, PercentPipe, AsyncPipe,
11+
NgxFlowModule
12+
],
1613
templateUrl: './app.component.html',
17-
styleUrls: ['./app.component.css'],
14+
styleUrl: './app.component.css',
1815
changeDetection: ChangeDetectionStrategy.OnPush
1916
})
20-
export class AppComponent implements AfterViewInit, OnDestroy {
17+
export class AppComponent {
18+
2119
@ViewChild('flow', { static: false }) flow: FlowDirective | undefined;
2220

2321
autoUploadSubscription: Subscription | undefined;
@@ -39,7 +37,4 @@ export class AppComponent implements AfterViewInit, OnDestroy {
3937
this.autoUploadSubscription?.unsubscribe();
4038
}
4139

42-
trackByTransfer(index: number, transfer: Transfer) {
43-
return transfer.id;
44-
}
4540
}

src/assets/.gitkeep renamed to projects/ngx-flow-demo/src/assets/.gitkeep

File renamed without changes.

‎projects/ngx-flow-demo/src/favicon.ico‎

14.7 KB
Binary file not shown.

src/index.html renamed to projects/ngx-flow-demo/src/index.html

File renamed without changes.

‎projects/ngx-flow-demo/src/main.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app/app.component';
3+
import Flow from '@flowjs/flow.js';
4+
import { FlowInjectionToken } from '@flowjs/ngx-flow';
5+
6+
bootstrapApplication(AppComponent, {
7+
providers: [
8+
{
9+
provide: FlowInjectionToken,
10+
useValue: Flow
11+
}
12+
]
13+
}).catch((err) => console.error(err));

src/styles.css renamed to projects/ngx-flow-demo/src/styles.css

File renamed without changes.

‎projects/ngx-flow-demo/tsconfig.app.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
2+
{
3+
"extends": "../../tsconfig.json",
4+
"compilerOptions": {
5+
"outDir": "../../out-tsc/app",
6+
"types": []
7+
},
8+
"files": [
9+
"src/main.ts"
10+
],
11+
"include": [
12+
"src/**/*.d.ts"
13+
]
14+
}

0 commit comments

Comments
 (0)