dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

feat(demo): updated up to bootstrap 5 (#1186)

Browse Source 
* feat(demo): updated up to bootstrap 5

* feat(demo): deleted commented and extra code

* fix(readme): deleted slack link

* fix(readme): deleted slack link
This commit was merged in pull request #1186.
This commit is contained in:
SvetlanaMuravlova
2021-09-07 11:35:02 +03:00
committed by GitHub
parent 2d8947e07c
commit 02a1b2a53c
9 changed files with 146 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -1,4 +1,4 @@
# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) # ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)
Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/)) Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/))
[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)

24
apps/demo/src/app/app.component.ts
View File

@@ -7,22 +7,24 @@ const gettingStarted = require('html-loader!markdown-loader!../getting-started.m
template: ` template: `
<main class="bd-pageheader"> <main class="bd-pageheader">
<div class="container"> <div class="container">
<h1>ng2-file-upload</h1> <div class="row">
<p>The Angular2 File Upload directives</p> <h1>ng2-file-upload</h1>
<a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a> <p>The Angular2 File Upload directives</p>
<div class="row d-flex" style="padding-top: 15px"> <p>
<div class="col-lg-1 block_links"> <a class="btn btn-light w-auto" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
<a href="https://npmjs.org/ng2-file-upload" style="display: flex"> </p>
</div>
<div class="row" style="padding-top: 15px">
<div class="d-flex flex-wrap">
<a href="https://npmjs.org/ng2-file-upload" class="me-2 d-flex mb-2">
<img src="https://img.shields.io/npm/v/ng2-file-upload/latest.svg" alt="npm latest version" > <img src="https://img.shields.io/npm/v/ng2-file-upload/latest.svg" alt="npm latest version" >
</a> </a>
</div> <a href="https://npmjs.org/ng2-file-upload" class="me-2 d-flex mb-2">
<div class="col-lg-1 block_links">
<a href="https://npmjs.org/ng2-file-upload" style="display: flex">
<img src="https://img.shields.io/npm/v/ng2-file-upload/next.svg" alt="npm next version" > <img src="https://img.shields.io/npm/v/ng2-file-upload/next.svg" alt="npm next version" >
</a> </a>
<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" class="me-2 mb-2"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px" class="mb-2"></iframe>
</div> </div>
<div class="col-lg-1 block_links"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></div>
<div class="col-lg-1 block_links"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></div>
</div> </div>
</div> </div>
</main> </main>

51
apps/demo/src/app/components/file-upload-section.html
View File

@@ -2,39 +2,42 @@
<div class="row"> <div class="row">
<tabset> <tabset>
<tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)"> <tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)">
<div class="card card-block panel panel-default panel-body"> <div class="card card-block p-3 border-top-0">
<simple-demo></simple-demo> <simple-demo></simple-demo>
<br> <br>
<div class="container p-0">
<div class="row" style="margin: 0px;"> <div class="row" style="margin: 0px;">
<tabset> <tabset class="p-0">
<tab heading="Markup"> <tab heading="Markup">
<div class="card card-block panel panel-default panel-body"> <div class="card card-block p-3 border-top-0">
<pre class="prettyprint linenums lang-html">{{desc.html}}</pre> <pre class="prettyprint linenums lang-html">{{desc.html}}</pre>
</div> </div>
</tab> </tab>
<tab heading="TypeScript"> <tab heading="TypeScript">
<div class="card card-block panel panel-default panel-body"> <div class="card card-block p-3 border-top-0">
<pre class="prettyprint linenums lang-js">{{desc.ts}}</pre> <pre class="prettyprint linenums lang-js">{{desc.ts}}</pre>
<pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre> <pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
</div> </div>
</tab> </tab>
<tab heading="Backend Demo"> <tab heading="Backend Demo">
<div class="card card-block panel panel-default panel-body"> <div class="card card-block p-3 border-top-0">
<pre class="prettyprint linenums lang-js">{{desc.js}}</pre> <pre class="prettyprint linenums lang-js">{{desc.js}}</pre>
</div> </div>
</tab> </tab>
</tabset> </tabset>
</div>
</div> </div>
</div> </div>
</tab> </tab>
</tabset> </tabset>
</div> </div>
<div class="row"> <div class="container">
<h2>API</h2> <div class="row mt-3">
<div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div> <h2>API</h2>
<div class="card card-block p-3" [innerHTML]="doc"></div>
</div>
</div> </div>
</section> </section>

43
apps/demo/src/app/components/file-upload/simple-demo.html
View File

@@ -2,13 +2,12 @@
.my-drop-zone { border: dotted 3px lightgray; } .my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */ .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; } .another-file-over-class { border: dotted 3px green; }
html, body { height: 100%; } html, body { height: 100%; }
</style> </style>
<div class="container"> <div class="container p-0">
<div class="navbar navbar-default"> <div class="navbar">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href>Angular2 File Upload</a> <a class="navbar-brand" href>Angular2 File Upload</a>
</div> </div>
@@ -24,7 +23,7 @@
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}" [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)" (fileOver)="fileOverBase($event)"
[uploader]="uploader" [uploader]="uploader"
class="well my-drop-zone"> class="well my-drop-zone p-2 mb-3">
Base drop zone Base drop zone
</div> </div>
@@ -32,21 +31,21 @@
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}" [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
(fileOver)="fileOverAnother($event)" (fileOver)="fileOverAnother($event)"
[uploader]="uploader" [uploader]="uploader"
class="well my-drop-zone"> class="well my-drop-zone p-2 mb-3">
Another drop zone Another drop zone
</div> </div>
Multiple Multiple<br>
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/> <input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
Single Single<br>
<input type="file" ng2FileSelect [uploader]="uploader" /> <input class="mt-2 mb-3" type="file" ng2FileSelect [uploader]="uploader" />
</div> </div>
<div class="col-md-9" style="margin-bottom: 40px"> <div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3> <h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p> <p>Queue length: {{ uploader?.queue?.length ? uploader?.queue?.length : 'Empty'}}</p>
<table class="table"> <table class="table">
<thead> <thead>
@@ -58,21 +57,21 @@
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="uploader?.queue?.length">
<tr *ngFor="let item of uploader.queue"> <tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td> <td data-label="Name"><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td> <td data-label="Size" *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.options.isHTML5"> <td data-label="Progress" *ngIf="uploader.options.isHTML5">
<div class="progress" style="margin-bottom: 0;"> <div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
</div> </div>
</td> </td>
<td class="text-center"> <td data-label="Status" class="text-center">
<span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span> <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td> </td>
<td nowrap> <td data-label="Actions" nowrap>
<button type="button" class="btn btn-success btn-xs" <button type="button" class="btn btn-success btn-xs"
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess"> (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload <span class="glyphicon glyphicon-upload"></span> Upload
@@ -93,15 +92,15 @@
<div> <div>
<div> <div>
Queue progress: Queue progress:
<div class="progress" style=""> <div class="progress mt-2 mb-3" style="">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div> </div>
</div> </div>
<button type="button" class="btn btn-success btn-s" <button type="button" class="btn btn-success btn-s me-2"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all <span class="glyphicon glyphicon-upload"></span> Upload all
</button> </button>
<button type="button" class="btn btn-warning btn-s" <button type="button" class="btn btn-warning btn-s me-2"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading"> (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button> </button>
@@ -119,9 +118,9 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading">Response</div> <div class="card-header">Response</div>
<div class="panel-body"> <div class="card-body">
{{ response }} {{ response }}
</div> </div>
</div> </div>

161
apps/demo/src/assets/css/style.css
View File

@@ -14,6 +14,15 @@
font-size: 36px; font-size: 36px;
} }
td {
vertical-align: middle;
}
a, .nav-tabs a.nav-link {
text-decoration: none;
color: #6f5499;
}
.btn-group-lg > .btn, .btn-lg { .btn-group-lg > .btn, .btn-lg {
font-size: 18px; font-size: 18px;
} }
@@ -22,10 +31,6 @@ section {
padding-top: 30px; padding-top: 30px;
} }
.bd-pageheader {
margin-top: 51px;
}
.page-header { .page-header {
padding-bottom: 9px; padding-bottom: 9px;
margin: 40px 0 20px; margin: 40px 0 20px;
@@ -37,43 +42,24 @@ section {
} }
.navbar { .navbar {
padding: 0; padding: 15px;
background-color: #f8f8f8;
border-color: #e7e7e7;
} }
.navbar-nav .nav-item { .navbar-nav .nav-item {
margin-left: 0 !important; margin-left: 0 !important;
} }
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav .navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
margin-right: 0 !important;
}
.navbar-brand { .navbar-brand {
color: #777; color: #777;
float: left;
height: 50px; height: 50px;
padding: 15px 15px; padding: 15px 15px;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
} }
.navbar-toggler { .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
margin-top: 8px;
margin-right: 15px;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333; color: #333;
background-color: transparent; background-color: transparent;
} }
@@ -113,42 +99,10 @@ section {
margin: 10px 0; margin: 10px 0;
} }
.scrollable-menu .nav-link { .card {
color: #337ab7; border-radius: 0 0 .25rem .25rem;
font-size: 14px;
} }
.scrollable-menu .nav-link:hover {
color: #23527c;
background-color: #eee;
}
simple-demo {
max-width: 100%;
}
simple-demo >.container {
max-width: 100%;
}
.block_links {
display: flex;
align-items: center;
width: auto;
padding: 0 0 0 15px;
margin-bottom: 10px;
}
.block_links:first-child {
padding-left: 15px;
}
.d-flex {
display: flex;
flex-wrap: wrap;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.bd-pageheader h1, .bd-pageheader p { .bd-pageheader h1, .bd-pageheader p {
margin-right: 380px; margin-right: 380px;
@@ -193,6 +147,53 @@ simple-demo >.container {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
font-size: .8em;
display: flex;
justify-content: space-between;
align-items: center;
}
table td::before {
content: attr(data-label);
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
td[data-label="Progress"] .progress {
width: 75%;
}
} }
@media (max-width: 400px) { @media (max-width: 400px) {
@@ -211,13 +212,6 @@ simple-demo >.container {
* iOS Resolution Quick Reference: http://www.iosres.com/ * iOS Resolution Quick Reference: http://www.iosres.com/
*/ */
.scrollable-menu {
height: 90vh !important;
width: 100vw;
overflow-x: hidden;
padding: 0 0 20px;
}
/** /**
* iPad with portrait orientation. * iPad with portrait orientation.
*/ */
@@ -246,29 +240,22 @@ simple-demo >.container {
} }
} }
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-toggle:focus {
outline: 0
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px
}
pre { pre {
white-space: pre-wrap; /* CSS 3 */ white-space: pre-wrap; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ word-wrap: break-word; /* Internet Explorer 5.5+ */
line-height: 1.42857143;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
padding: 15px;
} }
pre.prettyprint {
margin-bottom: 0;
}

2
apps/demo/src/index.html
View File

@@ -12,7 +12,7 @@
<link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors"> <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
<!--link to bootstrap.css--> <!--link to bootstrap.css-->
<link rel="stylesheet" crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/prettify-angulario.css"> <link rel="stylesheet" href="assets/css/prettify-angulario.css">
<style media="screen"> <style media="screen">

2
libs/ng2-file-upload/README.md
View File

@@ -1,4 +1,4 @@
# ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com) # ng2-file-upload [![npm version](https://badge.fury.io/js/ng2-file-upload.svg)](http://badge.fury.io/js/ng2-file-upload) [![npm downloads](https://img.shields.io/npm/dm/ng2-file-upload.svg)](https://npmjs.org/ng2-file-upload)
Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/)) Easy to use Angular2 directives for files upload ([demo](http://valor-software.github.io/ng2-file-upload/))
[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide) [![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://github.com/mgechev/angular2-style-guide)

11
package-lock.json generated
View File

@@ -21552,10 +21552,13 @@
} }
}, },
"ngx-bootstrap": { "ngx-bootstrap": {
"version": "6.2.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-6.2.0.tgz", "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-7.1.0.tgz",
"integrity": "sha512-5WKHo6/ltkenw4UyXZwED8rODCgp2RGbWurzYzZsF/gH1JO5SN7TJ+AL6kXYk6XM42sDA2WhN9Db+ZPNjiyHnA==", "integrity": "sha512-2qUTqq+DtimKpYNEga85G00zdMEZ2fcvtYaZkrdZRtwqyCXbPC69LXXzLkgu5697m83++iFWvwFp0IJDuGev1A==",
"dev": true "dev": true,
"requires": {
"tslib": "^2.0.0"
}
}, },
"nice-try": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",

2
package.json
View File

@@ -84,7 +84,7 @@
"jest-preset-angular": "8.3.2", "jest-preset-angular": "8.3.2",
"markdown-loader": "^6.0.0", "markdown-loader": "^6.0.0",
"ng-packagr": "^11.2.4", "ng-packagr": "^11.2.4",
"ngx-bootstrap": "6.2.0", "ngx-bootstrap": "7.1.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"protractor": "~7.0.0", "protractor": "~7.0.0",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",