Merge pull request #903 from adrianfaciu/chore/docs

Updating docs and formatting files

Author: Adrian Fâciu

README.md

@@ -25,6 +25,9 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
 
   - `uploader` - (`FileUploader`) - uploader object. See using in [demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts)
 
+### Events
+ - `onFileSelected` - fires when files are selected and added to the uploader queue
+
 ## API for `ng2FileDrop`
 
 ### Properties
@@ -39,6 +42,7 @@ Easy to use Angular2 directives for files upload ([demo](http://valor-software.g
   4. `itemAlias` - item alias (form name redefenition)
   5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
   6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
+  7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false.
 
 ### Events
 

demo/src/doc.md

@@ -28,6 +28,10 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
   4. `itemAlias` - item alias (form name redefenition)
   5. `formatDataFunction` - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
   6. `formatDataFunctionIsAsync` - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
+  7. `parametersBeforeFiles` - States if additional parameters should be appended before or after the file. Defaults to false.
+
+### Events
+ - `onFileSelected` - fires when files are selected and added to the uploader queue
 
 ## FileDrop API
 
@@ -40,4 +44,4 @@ import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-u
   - `fileOver` - it fires during 'over' and 'out' events for Drop Area; returns `boolean`: `true` if file is over Drop Area, `false` in case of out.
   See using in [ts demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.ts) and
   [html demo](https://github.com/valor-software/ng2-file-upload/blob/master/demo/components/file-upload/simple-demo.html)
-  - `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"`
+  - `onFileDrop` - it fires after a file has been dropped on a Drop Area; you can pass in `$event` to get the list of files that were dropped. i.e. `(onFileDrop)="dropped($event)"`

src/file-upload/file-item.class.ts

@@ -2,30 +2,30 @@ import { FileLikeObject } from './file-like-object.class';
 import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
 
 export class FileItem {
-  public file:FileLikeObject;
-  public _file:File;
-  public alias:string;
-  public url:string = '/';
-  public method:string;
-  public headers:any = [];
-  public withCredentials:boolean = true;
-  public formData:any = [];
-  public isReady:boolean = false;
-  public isUploading:boolean = false;
-  public isUploaded:boolean = false;
-  public isSuccess:boolean = false;
-  public isCancel:boolean = false;
-  public isError:boolean = false;
-  public progress:number = 0;
-  public index:number = void 0;
-  public _xhr:XMLHttpRequest;
-  public _form:any;
-
-  protected uploader:FileUploader;
-  protected some:File;
-  protected options:FileUploaderOptions;
-
-  public constructor(uploader:FileUploader, some:File, options:FileUploaderOptions) {
+  public file: FileLikeObject;
+  public _file: File;
+  public alias: string;
+  public url: string = '/';
+  public method: string;
+  public headers: any = [];
+  public withCredentials: boolean = true;
+  public formData: any = [];
+  public isReady: boolean = false;
+  public isUploading: boolean = false;
+  public isUploaded: boolean = false;
+  public isSuccess: boolean = false;
+  public isCancel: boolean = false;
+  public isError: boolean = false;
+  public progress: number = 0;
+  public index: number = void 0;
+  public _xhr: XMLHttpRequest;
+  public _form: any;
+
+  protected uploader: FileUploader;
+  protected some: File;
+  protected options: FileUploaderOptions;
+
+  public constructor(uploader: FileUploader, some: File, options: FileUploaderOptions) {
     this.uploader = uploader;
     this.some = some;
     this.options = options;
@@ -38,7 +38,7 @@ export class FileItem {
     this.url = uploader.options.url;
   }
 
-  public upload():void {
+  public upload(): void {
     try {
       this.uploader.uploadItem(this);
     } catch (e) {
@@ -47,43 +47,43 @@ export class FileItem {
     }
   }
 
-  public cancel():void {
+  public cancel(): void {
     this.uploader.cancelItem(this);
   }
 
-  public remove():void {
+  public remove(): void {
     this.uploader.removeFromQueue(this);
   }
 
-  public onBeforeUpload():void {
+  public onBeforeUpload(): void {
     return void 0;
   }
 
-  public onBuildForm(form:any):any {
-    return {form};
+  public onBuildForm(form: any): any {
+    return { form };
   }
 
-  public onProgress(progress:number):any {
-    return {progress};
+  public onProgress(progress: number): any {
+    return { progress };
   }
 
-  public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response, status, headers};
+  public onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any {
+    return { response, status, headers };
   }
 
-  public onError(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response, status, headers};
+  public onError(response: string, status: number, headers: ParsedResponseHeaders): any {
+    return { response, status, headers };
   }
 
-  public onCancel(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response, status, headers};
+  public onCancel(response: string, status: number, headers: ParsedResponseHeaders): any {
+    return { response, status, headers };
   }
 
-  public onComplete(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response, status, headers};
+  public onComplete(response: string, status: number, headers: ParsedResponseHeaders): any {
+    return { response, status, headers };
   }
 
-  public _onBeforeUpload():void {
+  public _onBeforeUpload(): void {
     this.isReady = true;
     this.isUploading = true;
     this.isUploaded = false;
@@ -94,16 +94,16 @@ export class FileItem {
     this.onBeforeUpload();
   }
 
-  public _onBuildForm(form:any):void {
+  public _onBuildForm(form: any): void {
     this.onBuildForm(form);
   }
 
-  public _onProgress(progress:number):void {
+  public _onProgress(progress: number): void {
     this.progress = progress;
     this.onProgress(progress);
   }
 
-  public _onSuccess(response:string, status:number, headers:ParsedResponseHeaders):void {
+  public _onSuccess(response: string, status: number, headers: ParsedResponseHeaders): void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = true;
@@ -115,7 +115,7 @@ export class FileItem {
     this.onSuccess(response, status, headers);
   }
 
-  public _onError(response:string, status:number, headers:ParsedResponseHeaders):void {
+  public _onError(response: string, status: number, headers: ParsedResponseHeaders): void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = true;
@@ -127,7 +127,7 @@ export class FileItem {
     this.onError(response, status, headers);
   }
 
-  public _onCancel(response:string, status:number, headers:ParsedResponseHeaders):void {
+  public _onCancel(response: string, status: number, headers: ParsedResponseHeaders): void {
     this.isReady = false;
     this.isUploading = false;
     this.isUploaded = false;
@@ -139,15 +139,15 @@ export class FileItem {
     this.onCancel(response, status, headers);
   }
 
-  public _onComplete(response:string, status:number, headers:ParsedResponseHeaders):void {
+  public _onComplete(response: string, status: number, headers: ParsedResponseHeaders): void {
     this.onComplete(response, status, headers);
 
     if (this.uploader.options.removeAfterUpload) {
       this.remove();
     }
   }
 
-  public _prepareToUploading():void {
+  public _prepareToUploading(): void {
     this.index = this.index || ++this.uploader._nextIndex;
     this.isReady = true;
   }

src/file-upload/file-like-object.class.ts

@@ -1,32 +1,31 @@
-function isElement(node:any):boolean {
+function isElement(node: any): boolean {
   return !!(node && (node.nodeName || node.prop && node.attr && node.find));
 }
 
 export class FileLikeObject {
-  public lastModifiedDate:any;
-  public size:any;
-  public type:string;
-  public name:string;
-  public rawFile:string;
+  public lastModifiedDate: any;
+  public size: any;
+  public type: string;
+  public name: string;
+  public rawFile: string;
 
-  public constructor(fileOrInput:any) {
+  public constructor(fileOrInput: any) {
     this.rawFile = fileOrInput;
     let isInput = isElement(fileOrInput);
     let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
     let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object';
     let method = '_createFrom' + postfix;
-    (this as any)[method](fakePathOrObject);
+    (this as any)[ method ](fakePathOrObject);
   }
 
-  public _createFromFakePath(path:string):void {
+  public _createFromFakePath(path: string): void {
     this.lastModifiedDate = void 0;
     this.size = void 0;
     this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase();
     this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
   }
 
-  public _createFromObject(object:{size:number, type:string, name:string}):void {
-    // this.lastModifiedDate = copy(object.lastModifiedDate);
+  public _createFromObject(object: { size: number, type: string, name: string }): void {
     this.size = object.size;
     this.type = object.type;
     this.name = object.name;

src/file-upload/file-select.directive.ts

@@ -2,12 +2,10 @@ import { Directive, EventEmitter, ElementRef, Input, HostListener, Output } from
 
 import { FileUploader } from './file-uploader.class';
 
-// todo: filters
-
 @Directive({ selector: '[ng2FileSelect]' })
 export class FileSelectDirective {
   @Input() public uploader: FileUploader;
-  @Output() public onFileSelected:EventEmitter<File[]> = new EventEmitter<File[]>();
+  @Output() public onFileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
 
   protected element: ElementRef;
 
@@ -27,23 +25,17 @@ export class FileSelectDirective {
     return !!this.element.nativeElement.attributes.multiple;
   }
 
-  @HostListener('change', ['$event'])
+  @HostListener('change')
   public onChange(): any {
-    // let files = this.uploader.isHTML5 ? this.element.nativeElement[0].files : this.element.nativeElement[0];
     let files = this.element.nativeElement.files;
     let options = this.getOptions();
     let filters = this.getFilters();
 
-    // if(!this.uploader.isHTML5) this.destroy();
-
     this.uploader.addToQueue(files, options, filters);
     this.onFileSelected.emit(files);
 
     if (this.isEmptyAfterSelection()) {
-      // todo
       this.element.nativeElement.value = '';
-      /*this.element.nativeElement
-       .replaceWith(this.element = this.element.nativeElement.clone(true)); // IE fix*/
     }
   }
 }

src/file-upload/file-type.class.ts

@@ -1,14 +1,14 @@
 export class FileType {
   /*  MS office  */
-  public static mime_doc:string[] = [
+  public static mime_doc: string[] = [
     'application/msword',
     'application/msword',
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
     'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
     'application/vnd.ms-word.document.macroEnabled.12',
     'application/vnd.ms-word.template.macroEnabled.12'
   ];
-  public static mime_xsl:string[] = [
+  public static mime_xsl: string[] = [
     'application/vnd.ms-excel',
     'application/vnd.ms-excel',
     'application/vnd.ms-excel',
@@ -19,7 +19,7 @@ export class FileType {
     'application/vnd.ms-excel.addin.macroEnabled.12',
     'application/vnd.ms-excel.sheet.binary.macroEnabled.12'
   ];
-  public static mime_ppt:string[] = [
+  public static mime_ppt: string[] = [
     'application/vnd.ms-powerpoint',
     'application/vnd.ms-powerpoint',
     'application/vnd.ms-powerpoint',
@@ -34,7 +34,7 @@ export class FileType {
   ];
 
   /* PSD */
-  public static mime_psd:string[] = [
+  public static mime_psd: string[] = [
     'image/photoshop',
     'image/x-photoshop',
     'image/psd',
@@ -44,7 +44,7 @@ export class FileType {
   ];
 
   /* Compressed files */
-  public static mime_compress:string[] = [
+  public static mime_compress: string[] = [
     'application/x-gtar',
     'application/x-gcompress',
     'application/compress',
@@ -53,7 +53,7 @@ export class FileType {
     'application/octet-stream'
   ];
 
-  public static getMimeClass(file:any):string {
+  public static getMimeClass(file: any): string {
     let mimeClass = 'application';
     if (this.mime_psd.indexOf(file.type) !== -1) {
       mimeClass = 'image';
@@ -81,8 +81,8 @@ export class FileType {
     return mimeClass;
   }
 
-  public static fileTypeDetection(inputFilename:string):string {
-    let types:{[key:string]:string} = {
+  public static fileTypeDetection(inputFilename: string): string {
+    let types: { [ key: string ]: string } = {
       'jpg': 'image',
       'jpeg': 'image',
       'tif': 'image',
@@ -144,11 +144,11 @@ export class FileType {
     if (chunks.length < 2) {
       return 'application';
     }
-    let extension = chunks[chunks.length - 1].toLowerCase();
-    if (types[extension] === undefined) {
+    let extension = chunks[ chunks.length - 1 ].toLowerCase();
+    if (types[ extension ] === undefined) {
       return 'application';
     } else {
-      return types[extension];
+      return types[ extension ];
     }
   }
 }

src/file-upload/file-upload.module.ts

@@ -5,9 +5,9 @@ import { FileDropDirective } from './file-drop.directive';
 import { FileSelectDirective } from './file-select.directive';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [FileDropDirective, FileSelectDirective],
-  exports: [FileDropDirective, FileSelectDirective]
+  imports: [ CommonModule ],
+  declarations: [ FileDropDirective, FileSelectDirective ],
+  exports: [ FileDropDirective, FileSelectDirective ]
 })
 export class FileUploadModule {
 }