Angular2 File Upload

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