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

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: `
<main class="bd-pageheader">
<div class="container">
<h1>ng2-file-upload</h1>
<p>The Angular2 File Upload directives</p>
<a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
<div class="row d-flex" style="padding-top: 15px">
<div class="col-lg-1 block_links">
<a href="https://npmjs.org/ng2-file-upload" style="display: flex">
<div class="row">
<h1>ng2-file-upload</h1>
<p>The Angular2 File Upload directives</p>
<p>
<a class="btn btn-light w-auto" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
</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" >
</a>
</div>
<div class="col-lg-1 block_links">
<a href="https://npmjs.org/ng2-file-upload" style="display: flex">
<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/next.svg" alt="npm next version" >
</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 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>
</main>

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

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