0.2 ngfUploader added

AckerApple · Oct 2, 2017 · b5983ef · b5983ef
1 parent 0ce3fbc
commit b5983ef
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 # angular-file - Change Log
 All notable changes to this project will be documented here.
 
+## [0.2.0] - 2017-10-02
+### Breaking Changes
+- FileUploader isHtml5Mode has been removed
+### Added
+- ngfUploader
+
 ## [0.1.0] - 2017-08-31
 ### Breaking Changes
 - fileUrl is now lastBaseUrl

diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ Easy to use Angular directives for file uploading ([demo](http://ackerapple.gith
 <details>
   <summary>Table of Contents</summary>
 
+- [Forked](#forked)
 - [Compare](#compare)
 - [Quick Start](#quick-start)
 - [Examples](#examples)
@@ -21,6 +22,11 @@ Easy to use Angular directives for file uploading ([demo](http://ackerapple.gith
 
 </details>
 
+## Forked
+PLEASE NOTE
+
+This code is made up of several packages that came before this one. Not all code is intended to be used and old code is often only to support others that are converting to this package.
+
 ## Compare
 Before even getting started, gage this package against others
 
@@ -48,19 +54,26 @@ Before even getting started, gage this package against others
 Showing off. This is NOT the best approach but sure does get a lot done for a little
 ```html
 <input
-  type="file"
+  type          = "file"
   multiple
-  accept="image/*"
+  accept        = "image/*"
   ngf
-  (init)="$event.uploader.options={url:'...', autoUpload:1}"
-  maxSize="1024"
+  (filesChange) = "uploader.uploadFiles($event)"
+  maxSize       = "1024"
 />
+
+<ngfUploader
+  [(ref)]   = "uploader"
+  [options] = "{url:'...'}"
+  (save)    = ""
+  (catch)   = ""
+></ngfUploader>
 ```
 
 ### Practical Example
 An example intended to have every line needed to run an app with angular-file
 ```typescript
-import { ngfModule, FileUploader, ngf } from "angular-file"
+import { ngfModule, ngfUploader, ngf } from "angular-file"
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
 import { Component, NgModule } from "@angular/core"
@@ -69,11 +82,18 @@ import 'rxjs/add/operator/toPromise';
 
 //two ways to upload files
 const template = `
+<ngfUploader
+  [(ref)]   = "uploader"
+  [options] = "{url:'...'}"
+  (save)    = ""
+  (catch)   = ""
+></ngfUploader>
+
 <input
   type="file"
   multiple
   accept="image/*"
-  [(ngf)]="ngfVar"
+  ngf
   [(file)]="file"
   [(files)]="files"
   maxSize="1024"
@@ -96,13 +116,13 @@ const template = `
   template: template
 })
 export class AppComponent {
-  ngfVar:ngf//becomes populated by template [(ngf)]="ngfVar"
+  uploader:ngfUploader//becomes <ngfUploader [(ref)]="uploader">
 
   constructor(public Http:Http){}
 
   // takes array of HTML5 Files and uploads
   uploadFiles(files:File[]):Promise<any>{
-    const uploader:FileUploader = this.ngfVar.uploader
+    const uploader:FileUploader = this.uploader
 
     //uploader.options.forcePostname = 'POST-NameIfNotJust-FILE'
 
@@ -127,12 +147,10 @@ export class AppComponent {
 
   // takes HTML5 File and uploads
   sendByModel(file:File):Promise<any>{
-    const uploader:FileUploader = this.ngfVar.uploader
-
-    //uploader.options.forcePostname = 'POST-NameIfNotJust-FILE'
+    //this.uploader.options.forcePostname = 'POST-NameIfNotJust-FILE'
 
     //to HTML5 FormData for transmission
-    const formData:FormData = uploader.getFormData( [file] )
+    const formData:FormData = this.uploader.getFormData( [file] )
 
     const config = new Request({
       url:'...',
@@ -234,45 +252,74 @@ Combo Drop Select
 
 ## API
 
+### ngfUploader Directive
+```javascript
+[(ref)]     : ngfUploader//reference to directive class
+[useNgHttp] : any = false//use Angular Http to transmit (beta)
+[options]   : {
+  forceFilename?       : string//override that all files will have defined name
+  forcePostname?       : string//override all FormData post names
+  accept?              : string;//acts like file input accept
+  allowedMimeType?     : Array<string>
+  allowedFileType?     : Array<string>
+  autoUpload?          : boolean
+  isHTML5?             : boolean
+  filters?             : Array<FilterFunction>
+  headers?             : Array<Headers>
+  method?              : string
+  authToken?           : string
+  maxFileSize?         : number
+  queueLimit?          : number
+  removeAfterUpload?   : boolean
+  url?                 : string
+  disableMultipart?    : boolean
+  itemAlias?           : string
+  authTokenHeader?     : string
+  additionalParameter? : {[key: string]: any}  
+}
+```
+
 ### ngf Directive
 ```javascript
-[multiple]:string
-[accept]:string
-[maxSize]:number
-[forceFilename]:string
-[forcePostname]:string//when FormData object created, sets name of POST input
-[ngfFixOrientation]:boolean = true
-[fileDropDisabled] = false
-[selectable] = false
-[(ngf)]:ngf
+[(ngf)]             : ngf//reference to directive class
+[multiple]          : string
+[accept]            : string
+[maxSize]           : number//bytes . 1024 = 1k . 1048576 = 1mb
+[forceFilename]     : string
+[forcePostname]     : string//when FormData object created, sets name of POST input
+[ngfFixOrientation] : boolean = true
+[fileDropDisabled]  : any = false
+[selectable]        : any = false
+[(lastInvalids)]    : {file:File,type:string}[] = []
+[(lastBaseUrl)]     : string//Base64 od last file uploaded url
+[(file)]            : File//last file uploaded
+[(files)]           : File[]
+(init)              : EventEmitter<ngf>
+
+//deprecated
 [uploader]:FileUploader = new FileUploader({})
-[(lastInvalids)]:{file:File,type:string}[] = []
-[(lastBaseUrl)]:string//Base64 od last file uploaded url
-[(file)]:File//last file uploaded
-[(files)]:File[]
-(init):EventEmitter<ngf>
 ```
 
 ### ngfDrop Directive
 This directive **extends** `ngf`
 ```javascript
-(fileOver):EventEmitter<any> = new EventEmitter()
-[(validDrag)] = false
-[(invalidDrag)] = false
+(fileOver)      :EventEmitter<any> = new EventEmitter()
+[(validDrag)]   :any = false
+[(invalidDrag)] :any = false
 ```
 
 ### ngfSelect Directive
 This directive **extends** `ngf`
 ```javascript
-[selectable] = true
+[selectable]:any = true
 ```
 
 ### ngfBackground Directive
 ```javascript
 [ngfBackground]:File
 ```
 
-### FileUploader
+### FileUploader Class
 ```typescript
 import { FileUploader } from "angular-file";
 ```
@@ -282,6 +329,26 @@ import { FileUploader } from "angular-file";
 - `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.
 - `itemAlias` - item alias (form name redefenition)
+- `options`
+  - forceFilename?       : string//override that all files will have defined name
+  - forcePostname?       : string//override all FormData post names
+  - accept?              : string;//acts like file input accept
+  - allowedMimeType?     : Array<string>
+  - allowedFileType?     : Array<string>
+  - autoUpload?          : boolean
+  - isHTML5?             : boolean
+  - filters?             : Array<FilterFunction>
+  - headers?             : Array<Headers>
+  - method?              : string
+  - authToken?           : string
+  - maxFileSize?         : number
+  - queueLimit?          : number
+  - removeAfterUpload?   : boolean
+  - url?                 : string
+  - disableMultipart?    : boolean
+  - itemAlias?           :  string
+  - authTokenHeader?     :  string
+  - additionalParameter? : {[key: string]: any}
 
 ## Upgrading from ng2-file-upload
 This package is a fork with a complete overhaul of [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload)

diff --git a/file-upload/FileItem.class.d.ts b/file-upload/FileItem.class.d.ts
@@ -19,11 +19,11 @@ export declare class FileItem {
     index: number;
     _xhr: XMLHttpRequest;
     _form: any;
-    protected uploader: FileUploader;
-    protected some: File;
-    protected options: FileUploaderOptions;
+    uploader: FileUploader;
+    some: File;
+    options: FileUploaderOptions;
     constructor(uploader: FileUploader, some: File, options: FileUploaderOptions);
-    upload(): void;
+    upload(): Promise<any>;
     cancel(): void;
     remove(): void;
     onBeforeUpload(): void;

diff --git a/file-upload/FileItem.class.js b/file-upload/FileItem.class.js
@@ -27,13 +27,17 @@ var FileItem = /** @class */ (function () {
         this.url = uploader.options.url;
     }
     FileItem.prototype.upload = function () {
-        try {
-            this.uploader.uploadItem(this);
-        }
-        catch (e) {
-            this.uploader._onCompleteItem(this, '', 0, {});
-            this.uploader._onErrorItem(this, '', 0, {});
-        }
+        var _this = this;
+        return new Promise(function (res, rej) {
+            try {
+                return _this.uploader.uploadItem(_this).then(res).catch(rej);
+            }
+            catch (e) {
+                _this.uploader._onCompleteItem(_this, '', 0, {});
+                _this.uploader._onErrorItem(_this, '', 0, {});
+                rej(e);
+            }
+        });
     };
     FileItem.prototype.cancel = function () {
         this.uploader.cancelItem(this);

diff --git a/file-upload/FileItem.class.metadata.json b/file-upload/FileItem.class.metadata.json
@@ -1 +1 @@
-[{"__symbolic":"module","version":3,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":49,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":49,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":42,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":42,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}}]
diff --git a/file-upload/FileUploader.class.d.ts b/file-upload/FileUploader.class.d.ts
@@ -1,5 +1,6 @@
 import { FileLikeObject } from './FileLikeObject.class';
 import { FileItem } from './FileItem.class';
+import { EventEmitter } from '@angular/core';
 export interface Headers {
     name: string;
     value: string;
@@ -35,6 +36,9 @@ export interface FileUploaderOptions {
     };
 }
 export declare class FileUploader {
+    done: EventEmitter<{}>;
+    success: EventEmitter<{}>;
+    catcher: EventEmitter<{}>;
     authToken: string;
     isUploading: boolean;
     queue: Array<FileItem>;
@@ -55,10 +59,9 @@ export declare class FileUploader {
     addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void;
     removeFromQueue(value: FileItem): void;
     clearQueue(): void;
-    isHtml5Mode(): boolean;
-    uploadItem(value: FileItem): void;
+    uploadItem(value: FileItem): Promise<any>;
     cancelItem(value: FileItem): void;
-    uploadAll(): void;
+    uploadAll(): Promise<any[]>;
     cancelAll(): void;
     isFile(value: any): boolean;
     isFileLikeObject(value: any): boolean;
@@ -87,10 +90,10 @@ export declare class FileUploader {
     protected _headersGetter(parsedHeaders: ParsedResponseHeaders): any;
     getQuedFiles(): File[];
     getFormData(files?: File[]): FormData;
-    protected _xhrTransport(item: FileItem): any;
+    protected _xhrTransport(item: FileItem): Promise<any>;
+    sendFormDataFileItem(sendable: FormData, item: FileItem, xhr?: XMLHttpRequest): Promise<any>;
     protected _getTotalProgress(value?: number): number;
     protected _getFilters(filters?: FilterFunction[] | string): FilterFunction[];
-    protected _render(): any;
     protected _queueLimitFilter(): boolean;
     getFileFilterFailName(file: File | FileLikeObject): string;
     _isValidFile(file: FileLikeObject, filters: FilterFunction[], options: FileUploaderOptions): boolean;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"__symbolic":"module","version":3,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":49,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":49,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}}]
		[{"__symbolic":"module","version":3,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":42,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FileItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploader"},{"__symbolic":"error","message":"Could not resolve type","line":27,"character":42,"context":{"typeName":"File"}},{"__symbolic":"reference","module":"./FileUploader.class","name":"FileUploaderOptions"}]}],"upload":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"onBeforeUpload":[{"__symbolic":"method"}],"onBuildForm":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"onSuccess":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}],"onComplete":[{"__symbolic":"method"}],"_onBeforeUpload":[{"__symbolic":"method"}],"_onBuildForm":[{"__symbolic":"method"}],"_onProgress":[{"__symbolic":"method"}],"_onSuccess":[{"__symbolic":"method"}],"_onError":[{"__symbolic":"method"}],"_onCancel":[{"__symbolic":"method"}],"_onComplete":[{"__symbolic":"method"}],"_prepareToUploading":[{"__symbolic":"method"}]}}}}]