Skip to content

Commit ca142e3

Browse files
lexasqlexasq
authored
Merge pull request #1291 from Frozen-byte/feature/angular_v20
Angular v20
2 parents 0857168 + 5d40a65 commit ca142e3

File tree

13 files changed

+8847
-6306
lines changed

13 files changed

+8847
-6306
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,5 @@ scripts/**/*.map
4141
.nx/
4242
.yarn
4343
.nx/
44+
.cursor/rules/nx-rules.mdc
45+
.github/instructions/nx.instructions.md

‎apps/demo/project.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
"production": {
6464
"buildTarget": "ng2-file-upload-demo:build"
6565
}
66-
}
66+
},
67+
"continuous": true
6768
},
6869
"lint": {
6970
"executor": "@nx/eslint:lint",

‎apps/demo/src/app/components/file-upload-section.html‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,43 @@
11
<section [attr.id]="name.toLowerCase()">
22
<div class="row">
33
<tabset>
4-
<tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)">
5-
<div class="card card-block p-3 border-top-0">
6-
<simple-demo></simple-demo>
7-
<br>
8-
<div class="container p-0">
9-
<div class="row" style="margin: 0px;">
10-
<tabset class="p-0">
11-
<tab heading="Markup">
12-
<div class="card card-block p-3 border-top-0">
13-
<pre class="prettyprint linenums lang-html">{{desc.html}}</pre>
14-
</div>
15-
</tab>
16-
<tab heading="TypeScript">
17-
<div class="card card-block p-3 border-top-0">
18-
<pre class="prettyprint linenums lang-js">{{desc.ts}}</pre>
19-
<pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
20-
</div>
21-
</tab>
22-
<tab heading="Backend Demo">
23-
<div class="card card-block p-3 border-top-0">
24-
<pre class="prettyprint linenums lang-js">{{desc.js}}</pre>
25-
</div>
26-
</tab>
27-
</tabset>
4+
@for (desc of tabs; track desc) {
5+
<tab heading="{{desc.heading}}" (select)="select($event)">
6+
<div class="card card-block p-3 border-top-0">
7+
<simple-demo></simple-demo>
8+
<br>
9+
<div class="container p-0">
10+
<div class="row" style="margin: 0px;">
11+
<tabset class="p-0">
12+
<tab heading="Markup">
13+
<div class="card card-block p-3 border-top-0">
14+
<pre class="prettyprint linenums lang-html">{{desc.html}}</pre>
15+
</div>
16+
</tab>
17+
<tab heading="TypeScript">
18+
<div class="card card-block p-3 border-top-0">
19+
<pre class="prettyprint linenums lang-js">{{desc.ts}}</pre>
20+
<pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
21+
</div>
22+
</tab>
23+
<tab heading="Backend Demo">
24+
<div class="card card-block p-3 border-top-0">
25+
<pre class="prettyprint linenums lang-js">{{desc.js}}</pre>
26+
</div>
27+
</tab>
28+
</tabset>
29+
</div>
30+
</div>
2831
</div>
29-
</div>
30-
</div>
31-
</tab>
32-
</tabset>
33-
</div>
32+
</tab>
33+
}
34+
</tabset>
35+
</div>
3436

35-
<div class="container">
36-
<div class="row mt-3">
37-
<h2>API</h2>
38-
<div class="card card-block p-3" [innerHTML]="doc"></div>
37+
<div class="container">
38+
<div class="row mt-3">
39+
<h2>API</h2>
40+
<div class="card card-block p-3" [innerHTML]="doc"></div>
41+
</div>
3942
</div>
40-
</div>
41-
</section>
43+
</section>

‎apps/demo/src/app/components/file-upload/simple-demo.html‎

Lines changed: 120 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,143 @@
11
<style>
2-
.my-drop-zone { border: dotted 3px lightgray; }
3-
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
4-
.another-file-over-class { border: dotted 3px green; }
5-
html, body { height: 100%; }
2+
.my-drop-zone { border: dotted 3px lightgray; }
3+
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
4+
.another-file-over-class { border: dotted 3px green; }
5+
html, body { height: 100%; }
66
</style>
77

88
<div class="container p-0">
99

10-
<div class="navbar">
11-
<div class="navbar-header">
12-
<a class="navbar-brand" href>Angular2 File Upload</a>
13-
</div>
10+
<div class="navbar">
11+
<div class="navbar-header">
12+
<a class="navbar-brand" href>Angular2 File Upload</a>
1413
</div>
14+
</div>
1515

16-
<div class="row">
16+
<div class="row">
1717

18-
<div class="col-md-3">
18+
<div class="col-md-3">
1919

20-
<h3>Select files</h3>
20+
<h3>Select files</h3>
2121

22-
<div ng2FileDrop
23-
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
24-
(fileOver)="fileOverBase($event)"
25-
[uploader]="uploader"
26-
class="well my-drop-zone p-2 mb-3">
27-
Base drop zone
28-
</div>
22+
<div ng2FileDrop
23+
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
24+
(fileOver)="fileOverBase($event)"
25+
[uploader]="uploader"
26+
class="well my-drop-zone p-2 mb-3">
27+
Base drop zone
28+
</div>
2929

30-
<div ng2FileDrop
31-
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
32-
(fileOver)="fileOverAnother($event)"
33-
[uploader]="uploader"
34-
class="well my-drop-zone p-2 mb-3">
35-
Another drop zone
36-
</div>
30+
<div ng2FileDrop
31+
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
32+
(fileOver)="fileOverAnother($event)"
33+
[uploader]="uploader"
34+
class="well my-drop-zone p-2 mb-3">
35+
Another drop zone
36+
</div>
3737

38-
Multiple<br>
39-
<input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
38+
Multiple<br>
39+
<input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
4040

41-
Single<br>
42-
<input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" />
43-
</div>
41+
Single<br>
42+
<input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" />
43+
</div>
4444

45-
<div class="col-md-9" style="margin-bottom: 40px">
46-
47-
<h3>Upload queue</h3>
48-
<p>Queue length: {{ uploader?.queue?.length ? uploader?.queue?.length : 'Empty'}}</p>
49-
50-
<table class="table">
51-
<thead>
52-
<tr>
53-
<th width="50%">Name</th>
54-
<th>Size</th>
55-
<th>Progress</th>
56-
<th>Status</th>
57-
<th>Actions</th>
58-
</tr>
59-
</thead>
60-
<tbody *ngIf="uploader?.queue?.length">
61-
<tr *ngFor="let item of uploader.queue">
62-
<td data-label="Name"><strong>{{ item?.file?.name }}</strong></td>
63-
<td data-label="Size" *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
64-
<td data-label="Progress" *ngIf="uploader.options.isHTML5">
65-
<div class="progress" style="margin-bottom: 0;">
66-
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
67-
</div>
68-
</td>
69-
<td data-label="Status" class="text-center">
70-
<span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
71-
<span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
72-
<span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
73-
</td>
74-
<td data-label="Actions" nowrap>
75-
<button type="button" class="btn btn-success btn-xs"
76-
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
77-
<span class="glyphicon glyphicon-upload"></span> Upload
78-
</button>
79-
<button type="button" class="btn btn-warning btn-xs"
80-
(click)="item.cancel()" [disabled]="!item.isUploading">
81-
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
82-
</button>
83-
<button type="button" class="btn btn-danger btn-xs"
84-
(click)="item.remove()">
85-
<span class="glyphicon glyphicon-trash"></span> Remove
86-
</button>
87-
</td>
88-
</tr>
89-
</tbody>
90-
</table>
91-
92-
<div>
93-
<div>
94-
Queue progress:
95-
<div class="progress mt-2 mb-3" style="">
96-
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
45+
<div class="col-md-9" style="margin-bottom: 40px">
46+
47+
<h3>Upload queue</h3>
48+
<p>Queue length: {{ uploader?.queue?.length ? uploader?.queue?.length : 'Empty'}}</p>
49+
50+
<table class="table">
51+
<thead>
52+
<tr>
53+
<th width="50%">Name</th>
54+
<th>Size</th>
55+
<th>Progress</th>
56+
<th>Status</th>
57+
<th>Actions</th>
58+
</tr>
59+
</thead>
60+
@if (uploader?.queue?.length) {
61+
<tbody>
62+
@for (item of uploader.queue; track item) {
63+
<tr>
64+
<td data-label="Name"><strong>{{ item?.file?.name }}</strong></td>
65+
@if (uploader.options.isHTML5) {
66+
<td data-label="Size" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
67+
}
68+
@if (uploader.options.isHTML5) {
69+
<td data-label="Progress">
70+
<div class="progress" style="margin-bottom: 0;">
71+
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
9772
</div>
98-
</div>
99-
<button type="button" class="btn btn-success btn-s me-2"
100-
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
101-
<span class="glyphicon glyphicon-upload"></span> Upload all
102-
</button>
103-
<button type="button" class="btn btn-warning btn-s me-2"
104-
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
105-
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
106-
</button>
107-
<button type="button" class="btn btn-danger btn-s"
108-
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
109-
<span class="glyphicon glyphicon-trash"></span> Remove all
110-
</button>
111-
</div>
112-
73+
</td>
74+
}
75+
<td data-label="Status" class="text-center">
76+
@if (item.isSuccess) {
77+
<span><i class="glyphicon glyphicon-ok"></i></span>
78+
}
79+
@if (item.isCancel) {
80+
<span><i class="glyphicon glyphicon-ban-circle"></i></span>
81+
}
82+
@if (item.isError) {
83+
<span><i class="glyphicon glyphicon-remove"></i></span>
84+
}
85+
</td>
86+
<td data-label="Actions" nowrap>
87+
<button type="button" class="btn btn-success btn-xs"
88+
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
89+
<span class="glyphicon glyphicon-upload"></span> Upload
90+
</button>
91+
<button type="button" class="btn btn-warning btn-xs"
92+
(click)="item.cancel()" [disabled]="!item.isUploading">
93+
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
94+
</button>
95+
<button type="button" class="btn btn-danger btn-xs"
96+
(click)="item.remove()">
97+
<span class="glyphicon glyphicon-trash"></span> Remove
98+
</button>
99+
</td>
100+
</tr>
101+
}
102+
</tbody>
103+
}
104+
</table>
105+
106+
<div>
107+
<div>
108+
Queue progress:
109+
<div class="progress mt-2 mb-3" style="">
110+
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
111+
</div>
113112
</div>
113+
<button type="button" class="btn btn-success btn-s me-2"
114+
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
115+
<span class="glyphicon glyphicon-upload"></span> Upload all
116+
</button>
117+
<button type="button" class="btn btn-warning btn-s me-2"
118+
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
119+
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
120+
</button>
121+
<button type="button" class="btn btn-danger btn-s"
122+
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
123+
<span class="glyphicon glyphicon-trash"></span> Remove all
124+
</button>
125+
</div>
114126

115127
</div>
116128

117-
<br><br>
129+
</div>
130+
131+
<br><br>
118132

119-
<div class="row">
120-
<div class="col-md-12">
121-
<div class="card">
122-
<div class="card-header">Response</div>
123-
<div class="card-body">
124-
{{ response }}
125-
</div>
126-
</div>
133+
<div class="row">
134+
<div class="col-md-12">
135+
<div class="card">
136+
<div class="card-header">Response</div>
137+
<div class="card-body">
138+
{{ response }}
127139
</div>
140+
</div>
128141
</div>
142+
</div>
129143
</div>

‎apps/demo/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
],
2424
"compilerOptions": {
2525
"target": "ES2022",
26-
"useDefineForClassFields": false
26+
"useDefineForClassFields": false,
27+
"moduleResolution": "bundler"
2728
}
2829
}

‎libs/ng2-file-upload/file-upload/file-drop.directive.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, EventEmitter, ElementRef, HostListener, Input, Output } from '@angular/core';
1+
import { Directive, EventEmitter, ElementRef, HostListener, Input, Output, inject } from '@angular/core';
22

33
import { FileUploader, FileUploaderOptions } from './file-uploader.class';
44

@@ -9,11 +9,7 @@ export class FileDropDirective {
99
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
1010
@Output() onFileDrop: EventEmitter<File[]> = new EventEmitter<File[]>();
1111

12-
protected element: ElementRef;
13-
14-
constructor(element: ElementRef) {
15-
this.element = element;
16-
}
12+
protected element: ElementRef= inject(ElementRef);
1713

1814
getOptions(): FileUploaderOptions | void {
1915
return this.uploader?.options;

‎libs/ng2-file-upload/file-upload/file-select.directive.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from '@angular/core';
1+
import { Directive, EventEmitter, ElementRef, Input, HostListener, Output, inject } from '@angular/core';
22

33
import { FileUploader, FileUploaderOptions } from './file-uploader.class';
44

@@ -8,11 +8,7 @@ export class FileSelectDirective {
88
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
99
@Output() onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
1010

11-
protected element: ElementRef;
12-
13-
constructor(element: ElementRef) {
14-
this.element = element;
15-
}
11+
protected element: ElementRef= inject(ElementRef);
1612

1713
getOptions(): FileUploaderOptions | undefined {
1814
return this.uploader?.options;

0 commit comments

Comments
 (0)