Angular2 File Upload
Install
Install the components
npm install ng2-file-upload --save
github:
https://github.com/valor-software/ng2-file-upload/tree/master
demo:
http://valor-software.com/ng2-file-upload/
demo code
<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.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.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> </div>
markup
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 {
public uploader:FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
typescript
/*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);
});
backend demo
API
Usage
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
Annotations
// class FileSelectDirective
@Directive({ selector: '[ng2FileSelect]' })
// class FileDropDirective
@Directive({ selector: '[ng2FileDrop]' })
FileSelect API
Properties
-
uploader- (FileUploader) - uploader object. 上传对象Parameters supported by this object(此对象支持的参数：):
url- URL of File Uploader's route(URL网址上传文件的路径)-
authToken- auth token that will be applied as 'Authorization' header during file send.(认证令牌，将作为“授权”标题在文件发送。) -
disableMultipart- If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.(如果'真'，禁止使用文件上传多个文件形式而流。一些API（例如Amazon S3）可能希望文件流，而不是通过表单发送。默认为false。)