chore(bump): updated versions (#1177)
* feat(upgrade): updated up to angular 11 tests are failed * chore(bump): updated versions * chore(bump): updated package * fix(style): delete extra rule * disabled ivy build, added prod config, changed demo serve script * feat(bump): added strict mode, doesn't build in dist, should be resolved * feat(core): added nx * feat(core): updated dependencies list * feat(github actions): check gh actions * feat(gh actions): try gh actions * feat(gh actions): try gh actions * feat(gh actions): try gh actions * feat(gh actions): try gh actions * feat(gh actions): try gh actions * feat(github actions): delete codecov * feat(firebase): try firebase actions * feat(firebase): try firebase actions * feat(firebase): try firebase actions * feat(firebase): try firebase actions * feat(firebase): try firebase actions * feat(strict): added strict mode * feat(github actions): updated yml file * fix(lint): fixed linting errors * fix(lint): fixed linting errors * fix(lint): fixed lint errors * Delete hosting.ZGlzdC9hcHBzL2RlbW8.cache * feat(github actions): added publish action * fix(firebase): test extra folder https Co-authored-by: Mishchenko Dmitriy <ripatrip@gmail.com> Co-authored-by: Dmitriy Shekhovtsov <valorkin@gmail.com>
This commit was merged in pull request #1177.
This commit is contained in:
SvetlanaMuravlova
committed by
GitHub
GitHub
parent
8171bc831b
commit
be27edbe13
50
apps/demo/src/app/components/file-upload/file-catcher.js
Normal file
50
apps/demo/src/app/components/file-upload/file-catcher.js
Normal file
@@ -0,0 +1,50 @@
|
||||
/*eslint-disable*/
|
||||
var express = require('express');
|
||||
var multer = require('multer');
|
||||
var fs = require('fs');
|
||||
var app = express();
|
||||
|
||||
var DIR = './uploads/';
|
||||
|
||||
var upload = multer({dest: DIR});
|
||||
|
||||
app.use(function (req, res, next) {
|
||||
res.setHeader('Access-Control-Allow-Origin', 'http://valor-software.github.io');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'POST');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
|
||||
res.setHeader('Access-Control-Allow-Credentials', true);
|
||||
next();
|
||||
});
|
||||
|
||||
app.use(multer({
|
||||
dest: DIR,
|
||||
rename: function (fieldname, filename) {
|
||||
return filename + Date.now();
|
||||
},
|
||||
onFileUploadStart: function (file) {
|
||||
console.log(file.originalname + ' is starting ...');
|
||||
},
|
||||
onFileUploadComplete: function (file) {
|
||||
console.log(file.fieldname + ' uploaded to ' + file.path);
|
||||
}
|
||||
}));
|
||||
|
||||
app.get('/api', function (req, res) {
|
||||
res.end('file catcher example');
|
||||
});
|
||||
|
||||
app.post('/api', function (req, res) {
|
||||
upload(req, res, function (err) {
|
||||
if (err) {
|
||||
return res.end(err.toString());
|
||||
}
|
||||
|
||||
res.end('File is uploaded');
|
||||
});
|
||||
});
|
||||
|
||||
var PORT = process.env.PORT || 3000;
|
||||
|
||||
app.listen(PORT, function () {
|
||||
console.log('Working on port ' + PORT);
|
||||
});
|
||||
130
apps/demo/src/app/components/file-upload/simple-demo.html
Normal file
130
apps/demo/src/app/components/file-upload/simple-demo.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<style>
|
||||
.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="navbar navbar-default">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href>Angular2 File Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3">
|
||||
|
||||
<h3>Select files</h3>
|
||||
|
||||
<div ng2FileDrop
|
||||
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
|
||||
(fileOver)="fileOverBase($event)"
|
||||
[uploader]="uploader"
|
||||
class="well my-drop-zone">
|
||||
Base drop zone
|
||||
</div>
|
||||
|
||||
<div ng2FileDrop
|
||||
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
|
||||
(fileOver)="fileOverAnother($event)"
|
||||
[uploader]="uploader"
|
||||
class="well my-drop-zone">
|
||||
Another drop zone
|
||||
</div>
|
||||
|
||||
Multiple
|
||||
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
|
||||
|
||||
Single
|
||||
<input 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>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="50%">Name</th>
|
||||
<th>Size</th>
|
||||
<th>Progress</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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">
|
||||
<div class="progress" style="margin-bottom: 0;">
|
||||
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td 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>
|
||||
<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
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-xs"
|
||||
(click)="item.cancel()" [disabled]="!item.isUploading">
|
||||
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-xs"
|
||||
(click)="item.remove()">
|
||||
<span class="glyphicon glyphicon-trash"></span> Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
Queue progress:
|
||||
<div class="progress" style="">
|
||||
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-success btn-s"
|
||||
(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"
|
||||
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
|
||||
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-s"
|
||||
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
|
||||
<span class="glyphicon glyphicon-trash"></span> Remove all
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Response</div>
|
||||
<div class="panel-body">
|
||||
{{ response }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
50
apps/demo/src/app/components/file-upload/simple-demo.ts
Normal file
50
apps/demo/src/app/components/file-upload/simple-demo.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FileUploader } from 'ng2-file-upload';
|
||||
|
||||
// const URL = '/api/';
|
||||
const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
|
||||
|
||||
@Component({
|
||||
selector: 'simple-demo',
|
||||
templateUrl: './simple-demo.html'
|
||||
})
|
||||
export class SimpleDemoComponent {
|
||||
|
||||
uploader: FileUploader;
|
||||
hasBaseDropZoneOver: boolean;
|
||||
hasAnotherDropZoneOver: boolean;
|
||||
response: string;
|
||||
|
||||
constructor() {
|
||||
this.uploader = new FileUploader({
|
||||
url: URL,
|
||||
disableMultipart: true, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
|
||||
formatDataFunctionIsAsync: true,
|
||||
formatDataFunction: async item => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve({
|
||||
name: item._file.name,
|
||||
length: item._file.size,
|
||||
contentType: item._file.type,
|
||||
date: new Date()
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.hasBaseDropZoneOver = false;
|
||||
this.hasAnotherDropZoneOver = false;
|
||||
|
||||
this.response = '';
|
||||
|
||||
this.uploader.response.subscribe(res => this.response = res );
|
||||
}
|
||||
|
||||
fileOverBase(e: any): void {
|
||||
this.hasBaseDropZoneOver = e;
|
||||
}
|
||||
|
||||
fileOverAnother(e: any): void {
|
||||
this.hasAnotherDropZoneOver = e;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user