docs, breaking change

CHANGELOG.md

@@ -1,6 +1,10 @@
 # angular-file - Change Log
 All notable changes to this project will be documented here.
 
+## [0.1.0] - 2017-08-31
+### Breaking Changes
+- fileUrl is now lastBaseUrl
+
 ## [0.0.0] - 2017-08-31
 ### Overhauled by Acker
 - Taken from an outdated barely usable package to an up-to-date slimmed down easier to develop version

README.md

@@ -1,12 +1,10 @@
-# angular-file [![npm version](https://badge.fury.io/js/angular-file.svg)](http://badge.fury.io/js/angular-file)[![npm downloads](https://img.shields.io/npm/dm/angular-file.svg)](https://npmjs.org/angular-file)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
-
-> ! UNDER CONSTRUCTION !
->> Forked from outdated package: [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload)
->> This package works. Just needs more documentation, bells, and whistles
-
+# angular-file
 Easy to use Angular directives for files upload ([demo](http://ackerapple.github.io/angular-file/))
 
-[![Build Status](https://travis-ci.org/ackerapple/angular-file.svg?branch=development)](https://travis-ci.org/ackerapple/angular-file)
+[![npm version](https://badge.fury.io/js/angular-file.svg)](http://badge.fury.io/js/angular-file)
+[![npm downloads](https://img.shields.io/npm/dm/angular-file.svg)](https://npmjs.org/angular-file)
+[![Build status](https://ci.appveyor.com/api/projects/status/sq815bogrtky29b8/branch/development?svg=true)](https://ci.appveyor.com/project/AckerApple/angular-file/branch/development)
+[![Build Status](https://travis-ci.org/AckerApple/angular-file.svg?branch=development)](https://travis-ci.org/AckerApple/angular-file)
 [![Dependency Status](https://david-dm.org/ackerapple/angular-file.svg)](https://david-dm.org/ackerapple/angular-file)
 
 <details>
@@ -16,6 +14,7 @@ Easy to use Angular directives for files upload ([demo](http://ackerapple.github
 - [Examples](#examples)
 - [API](#api)
 - [Troubleshooting](#troubleshooting)
+- [Credits](#credits)
 - [License](#license)
 
 </details>
@@ -28,15 +27,92 @@ Easy to use Angular directives for files upload ([demo](http://ackerapple.github
 
   Alternatively, you can [download it in a ZIP file](https://github.com/ackerapple/angular-file/archive/master.zip).
 
-2. Currently `angular-file` contains two directives: `ng2-file-select` and `ng2-file-drop`. `ng2-file-select` is used for 'file-input' field of form and
-  `ng2-file-drop` is used for area that will be used for dropping of file or files.
+2. Currently `angular-file` contains two directives: `ngfSelect` and `ngFileDrop`. `ngfSelect` is used for 'file-input' field of form and
+  `ngfDrop` is used for area that will be used for dropping of file or files.
 
 3. More information regarding using of ***angular-file*** is located in
   [demo](http://ackerapple.github.io/angular-file/) and [demo sources](https://github.com/ackerapple/angular-file/tree/master/demo).
 
 ## Examples
 
-### Select Files
+### Quickest Dirty Example
+```html
+<input
+  type="file"
+  multiple
+  accept="image/*"
+  ngf
+  (init)="$event.uploader.options={url:'...', autoUpload:1}"
+  maxSize="1024"
+/>
+```
+
+### Practical Example
+```typescript
+import { ngfModule, FileUploader, ngf } from "angular-file"
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { Component, NgModule } from "@angular/core"
+import { Http, Response, Request } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+const template = `
+<input
+  type="file"
+  multiple
+  accept="image/*"
+  [(ngf)]="ngfVar"
+  (filesChange)="uploadFiles($event)"
+  maxSize="1024"
+/>
+`
+
+@Component({
+  selector: 'app',
+  template: template
+})
+export class AppComponent {
+  ngfVar:ngf
+
+  constructor(public Http:Http){}
+
+  // takes array of HTML5 Files and uploads
+  uploadFiles(files:File[]):Promise<number>{
+    const uploader:FileUploader = ngfVar.uploader
+
+    //to HTML5 FormData for transmission
+    const formData:FormData = uploader.getFormData(files)
+
+    const config = new Request({
+      url:'...',
+      method:'POST',
+      body:formData
+    })
+
+    return this.Http.request( config )
+    .toPromise()
+    .then( ()=>alert('upload complete, old school alert used') )
+    .catch( e=>alert('!failure beyond compare cause:' + e.toString()) )
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    ngfModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+```
+
+
+### Select Files Examples
 Examples of how to allow file selection
 
 Multiple
@@ -66,7 +142,7 @@ Images Only
 ></div>
 ```
 
-### Drop Files
+### Drop Files Examples
 Examples of how to allow file drag/drop
 
 Basic
@@ -108,9 +184,10 @@ Combo Drop Select
 [(ngf)]:ngf
 [uploader]:FileUploader = new FileUploader({})
 [(lastInvalids)]:{file:File,type:string}[] = []
-[(fileUrl)]:string//last file uploaded url
+[(lastBaseUrl)]:string//Base64 od last file uploaded url
 [(file)]:File//last file uploaded
 [(files)]:File[]
+(init):EventEmitter<ngf>
 ```
 
 ### ngfDrop Directive
@@ -151,5 +228,9 @@ Please follow this guidelines when reporting bugs and feature requests:
 
 Thanks for understanding!
 
+## Credits
+- Current Author: Acker Apple
+- Forked from outdated package: [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload)
+
 ## License
 The MIT License (see the [LICENSE](https://github.com/ackerapple/angular-file/blob/master/LICENSE) file for the full text)

file-upload/ngf.directive.d.ts

@@ -11,6 +11,7 @@ export declare class ngf {
     ngfFixOrientation: boolean;
     fileDropDisabled: boolean;
     selectable: boolean;
+    directiveInit: EventEmitter<ngf>;
     ref: ngf;
     refChange: EventEmitter<ngf>;
     uploader: FileUploader;
@@ -22,8 +23,8 @@ export declare class ngf {
         file: File;
         type: string;
     }[]>;
-    fileUrl: string;
-    fileUrlChange: EventEmitter<string>;
+    lastBaseUrl: string;
+    lastBaseUrlChange: EventEmitter<string>;
     file: File;
     fileChange: EventEmitter<File>;
     files: File[];

file-upload/ngf.directive.js

@@ -9,11 +9,12 @@ var ngf = /** @class */ (function () {
         this.ngfFixOrientation = true;
         this.fileDropDisabled = false;
         this.selectable = false;
+        this.directiveInit = new core_1.EventEmitter();
         this.refChange = new core_1.EventEmitter();
         this.uploader = new FileUploader_class_1.FileUploader({});
         this.lastInvalids = [];
         this.lastInvalidsChange = new core_1.EventEmitter();
-        this.fileUrlChange = new core_1.EventEmitter();
+        this.lastBaseUrlChange = new core_1.EventEmitter();
         this.fileChange = new core_1.EventEmitter();
         this.filesChange = new core_1.EventEmitter();
     }
@@ -43,7 +44,10 @@ var ngf = /** @class */ (function () {
             this.uploader.options.forcePostname = this.forcePostname;
         }
         //create reference to this class with one cycle delay to avoid ExpressionChangedAfterItHasBeenCheckedError
-        setTimeout(function () { return _this.refChange.emit(_this); }, 0);
+        setTimeout(function () {
+            _this.refChange.emit(_this);
+            _this.directiveInit.emit(_this);
+        }, 0);
     };
     ngf.prototype.paramFileElm = function () {
         if (this.fileElm)
@@ -103,9 +107,9 @@ var ngf = /** @class */ (function () {
         this.filesChange.emit(this.files = files);
         if (files.length) {
             this.fileChange.emit(this.file = files[0]);
-            if (this.fileUrlChange.observers.length) {
+            if (this.lastBaseUrlChange.observers.length) {
                 this.uploader.dataUrl(files[0])
-                    .then(function (url) { return _this.fileUrlChange.emit(url); });
+                    .then(function (url) { return _this.lastBaseUrlChange.emit(url); });
             }
         }
     };
@@ -199,13 +203,14 @@ var ngf = /** @class */ (function () {
         'ngfFixOrientation': [{ type: core_1.Input },],
         'fileDropDisabled': [{ type: core_1.Input },],
         'selectable': [{ type: core_1.Input },],
+        'directiveInit': [{ type: core_1.Output, args: ['init',] },],
         'ref': [{ type: core_1.Input, args: ['ngf',] },],
         'refChange': [{ type: core_1.Output, args: ['ngfChange',] },],
         'uploader': [{ type: core_1.Input },],
         'lastInvalids': [{ type: core_1.Input },],
         'lastInvalidsChange': [{ type: core_1.Output },],
-        'fileUrl': [{ type: core_1.Input },],
-        'fileUrlChange': [{ type: core_1.Output },],
+        'lastBaseUrl': [{ type: core_1.Input },],
+        'lastBaseUrlChange': [{ type: core_1.Output },],
         'file': [{ type: core_1.Input },],
         'fileChange': [{ type: core_1.Output },],
         'files': [{ type: core_1.Input },],

file-upload/ngfSelect.directive.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import { ngf } from "./ngf.directive";
 export declare class ngfSelect extends ngf {
-    selectable: boolean;
+    selectable: any;
     ref: ngfSelect;
     refChange: EventEmitter<ngfSelect>;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "main": "index.js",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Angular file upload directives",
   "module": "index.js",
   "typings": "index.d.ts",