diff --git a/README.md b/README.md
index c7ccd945..cfd49fc2 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
# angular-file
-Easy to use Angular directives for files upload ([demo](http://ackerapple.github.io/angular-file/))
+Easy to use Angular directives for file uploading ([demo](http://ackerapple.github.io/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)
@@ -10,25 +10,34 @@ Easy to use Angular directives for files upload ([demo](http://ackerapple.github
Table of Contents
+- [Compare](#compare)
- [Quick Start](#quick-start)
- [Examples](#examples)
- [API](#api)
+- [Upgrading from ng2-file-upload](#upgrading-from-ng2-file-upload)
- [Troubleshooting](#troubleshooting)
- [Credits](#credits)
- [License](#license)
+## Compare
+Before even getting started, gage this package against others
+
+> Currently, September of 2017, [ng2-file-upload](https://www.npmjs.com/package/ng2-file-upload) is the most trending Angular file upload package. This package, **angular-file**, is a much improved fork of ng2-file-upload. Use angular-file **NOT** the outdated ng2-file-upload
+
+[TAP here for npmtrends of Angular file uploaders](http://www.npmtrends.com/angular2-http-file-upload-vs-angular2-file-uploader-vs-ng2-file-upload-vs-angular-file)
+
+
## Quick Start
1. A recommended way to install ***angular-file*** is through [npm](https://www.npmjs.com/search?q=angular-file) package manager using the following command:
- `npm i angular-file --save-dev`
+ `npm install angular-file --save-dev`
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: `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.
+2. Currently `angular-file` contains three directives: `ngf`, `ngfSelect`, and `ngfDrop`. `ngf` and `ngfSelect` are quite the same with just different defaults and they both utilize `` functionality. `ngfDrop` is used to designate an area that will be used for dropping of file(s).
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).
@@ -36,6 +45,7 @@ Easy to use Angular directives for files upload ([demo](http://ackerapple.github
## Examples
### Quickest Dirty Example
+Showing off. This is NOT the best approach but sure does get a lot done for a little
```html
+
+
+
+
@@ -72,15 +96,17 @@ const template = `
template: template
})
export class AppComponent {
- ngfVar:ngf
+ ngfVar:ngf//becomes populated by template [(ngf)]="ngfVar"
constructor(public Http:Http){}
// takes array of HTML5 Files and uploads
uploadFiles(files:File[]):Promise{
- const uploader:FileUploader = ngfVar.uploader
+ const uploader:FileUploader = this.ngfVar.uploader
- //to HTML5 FormData for transmission
+ //uploader.options.forcePostname = 'POST-NameIfNotJust-FILE'
+
+ //to HTML5 FormData for transmission (hint: post name defaults to "file")
const formData:FormData = uploader.getFormData(files)
const config = new Request({
@@ -89,11 +115,33 @@ export class AppComponent {
body:formData
})
+ return this.postRequest(config)
+ }
+
+ postRequest( config:Request ){
return this.Http.request( config )
.toPromise()
.then( ()=>alert('upload complete, old school alert used') )
.catch( e=>alert('!failure beyond compare cause:' + e.toString()) )
}
+
+ // takes HTML5 File and uploads
+ sendByModel(file:File){
+ const uploader:FileUploader = this.ngfVar.uploader
+
+ //uploader.options.forcePostname = 'POST-NameIfNotJust-FILE'
+
+ //to HTML5 FormData for transmission
+ const formData:FormData = uploader.getFormData( [file] )
+
+ const config = new Request({
+ url:'...',
+ method:'POST',
+ body:formData
+ })
+
+ return this.postRequest( config )
+ }
}
@NgModule({
@@ -177,7 +225,7 @@ Combo Drop Select
[accept]:string
[maxSize]:number
[forceFilename]:string
-[forcePostname]:string
+[forcePostname]:string//when FormData object created, sets name of POST input
[ngfFixOrientation]:boolean = true
[fileDropDisabled] = false
[selectable] = false
@@ -220,6 +268,28 @@ import { FileUploader } from "angular-file";
- `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)
+## 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)
+
+- Breaking Changes
+ - ng2FileSelect becomes ngfSelect
+ - ng2FileDrop becomes ngfDrop
+ - Import Module
+ - Deprecated `import { FileUploadModule } from "ng2-file-upload"`
+ - **Update** `import { ngfModule } from "angular-file"`
+
+> More breaking changes may exist in upgrading including file naming conventions. This list is to be updated
+
+- Recommended Changes
+ - Use `ngf` selectable="1" instead of `ngfSelect`
+ - [uploader] was not to my liking
+ - I think this was a poor design
+ - Use `[(file)]` and `[(files)]` as models and then wrap them in HTML5 FormData for transmission
+ - Tools included to help do this
+ - `(fileOver)` is better suited as:
+ - `[(validDrag)]="validDragVar"`
+ - `[(invalidDrag)]="invalidDragVar"`
+
## Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
diff --git a/package.json b/package.json
index 104b18e8..362880d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"main": "index.js",
- "version": "0.1.0",
+ "version": "0.1.2",
"description": "Angular file upload directives",
"module": "index.js",
"typings": "index.d.ts",