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

  1     <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      
  6         html, body { height: 100%; }
  7     </style>
  8      
  9     <div class="container">
 10      
 11         <div class="navbar navbar-default">
 12             <div class="navbar-header">
 13                 <a class="navbar-brand" href>Angular2 File Upload</a>
 14             </div>
 15         </div>
 16      
 17         <div class="row">
 18      
 19             <div class="col-md-3">
 20      
 21                 <h3>Select files</h3>
 22      
 23                 <div ng2FileDrop
 24                      [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
 25                      (fileOver)="fileOverBase($event)"
 26                      [uploader]="uploader"
 27                      class="well my-drop-zone">
 28                     Base drop zone
 29                 </div>
 30      
 31                 <div ng2FileDrop
 32                      [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
 33                      (fileOver)="fileOverAnother($event)"
 34                      [uploader]="uploader"
 35                      class="well my-drop-zone">
 36                     Another drop zone
 37                 </div>
 38      
 39                 Multiple
 40                 <input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
 41      
 42                 Single
 43                 <input type="file" ng2FileSelect [uploader]="uploader" />
 44             </div>
 45      
 46             <div class="col-md-9" style="margin-bottom: 40px">
 47      
 48                 <h3>Upload queue</h3>
 49                 <p>Queue length: {{ uploader?.queue?.length }}</p>
 50      
 51                 <table class="table">
 52                     <thead>
 53                     <tr>
 54                         <th width="50%">Name</th>
 55                         <th>Size</th>
 56                         <th>Progress</th>
 57                         <th>Status</th>
 58                         <th>Actions</th>
 59                     </tr>
 60                     </thead>
 61                     <tbody>
 62                     <tr *ngFor="let item of uploader.queue">
 63                         <td><strong>{{ item?.file?.name }}</strong></td>
 64                         <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
 65                         <td *ngIf="uploader.isHTML5">
 66                             <div class="progress" style="margin-bottom: 0;">
 67                                 <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
 68                             </div>
 69                         </td>
 70                         <td class="text-center">
 71                             <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
 72                             <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
 73                             <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
 74                         </td>
 75                         <td nowrap>
 76                             <button type="button" class="btn btn-success btn-xs"
 77                                     (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
 78                                 <span class="glyphicon glyphicon-upload"></span> Upload
 79                             </button>
 80                             <button type="button" class="btn btn-warning btn-xs"
 81                                     (click)="item.cancel()" [disabled]="!item.isUploading">
 82                                 <span class="glyphicon glyphicon-ban-circle"></span> Cancel
 83                             </button>
 84                             <button type="button" class="btn btn-danger btn-xs"
 85                                     (click)="item.remove()">
 86                                 <span class="glyphicon glyphicon-trash"></span> Remove
 87                             </button>
 88                         </td>
 89                     </tr>
 90                     </tbody>
 91                 </table>
 92      
 93                 <div>
 94                     <div>
 95                         Queue progress:
 96                         <div class="progress" style="">
 97                             <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
 98                         </div>
 99                     </div>
100                     <button type="button" class="btn btn-success btn-s"
101                             (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
102                         <span class="glyphicon glyphicon-upload"></span> Upload all
103                     </button>
104                     <button type="button" class="btn btn-warning btn-s"
105                             (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
106                         <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
107                     </button>
108                     <button type="button" class="btn btn-danger btn-s"
109                             (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
110                         <span class="glyphicon glyphicon-trash"></span> Remove all
111                     </button>
112                 </div>
113      
114             </div>
115      
116         </div>
117      
118     </div>

markup

 1     import { Component } from '@angular/core';
 2     import { FileUploader } from 'ng2-file-upload';
 3      
 4     // const URL = '/api/';
 5     const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 6      
 7     @Component({
 8       selector: 'simple-demo',
 9       templateUrl: './simple-demo.html'
10     })
11     export class SimpleDemoComponent {
12       public uploader:FileUploader = new FileUploader({url: URL});
13       public hasBaseDropZoneOver:boolean = false;
14       public hasAnotherDropZoneOver:boolean = false;
15      
16       public fileOverBase(e:any):void {
17         this.hasBaseDropZoneOver = e;
18       }
19      
20       public fileOverAnother(e:any):void {
21         this.hasAnotherDropZoneOver = e;
22       }
23     }

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。)