Updated: working version

components/file-upload/file-drop.ts

@@ -0,0 +1,98 @@
+import {
+  Component, View, OnInit, OnDestroy, OnChanges,
+  Directive, LifecycleEvent,
+  EventEmitter, ElementRef, Renderer,
+  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
+} from 'angular2/angular2';
+
+import {FileUploader} from './file-uploader';
+
+@Directive({
+  selector: '[ng2-file-drop]',
+  properties: ['config: ng2FileDrop', 'uploader'],
+  events: ['fileOver'],
+  host: {
+    '(drop)': 'onDrop($event)',
+    '(dragover)': 'onDragOver($event)',
+    '(dragleave)': 'onDragLeave($event)'
+  }
+})
+export class FileDrop {
+  public uploader:FileUploader;
+  public config:any = {};
+  private fileOver:EventEmitter = new EventEmitter();
+
+  constructor(private element:ElementRef) {
+  }
+
+  getOptions() {
+    return this.uploader.options;
+  }
+
+  getFilters() {
+  }
+
+  onDrop(event) {
+    let transfer = this._getTransfer(event);
+    if (!transfer) {
+      return;
+    }
+
+    let options = this.getOptions();
+    let filters = this.getFilters();
+    this._preventAndStop(event);
+    this.uploader.addToQueue(transfer.files, options, filters);
+    this.fileOver.next(false);
+  }
+
+  onDragOver(event) {
+    let transfer = this._getTransfer(event);
+    if (!this._haveFiles(transfer.types)) {
+      return;
+    }
+
+    transfer.dropEffect = 'copy';
+    this._preventAndStop(event);
+    this.fileOver.next(true);
+  }
+
+  onDragLeave(event) {
+    if (event.currentTarget === this.element[0]) {
+      return;
+    }
+
+    this._preventAndStop(event);
+    this.fileOver.next(false);
+  }
+
+  _getTransfer(event) {
+    return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer; // jQuery fix;
+  }
+
+  _preventAndStop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  _haveFiles(types) {
+    if (!types) {
+      return false;
+    }
+
+    if (types.indexOf) {
+      return types.indexOf('Files') !== -1;
+    } else if (types.contains) {
+      return types.contains('Files');
+    } else {
+      return false;
+    }
+  }
+
+  _addOverClass(item) {
+    item.addOverClass();
+  }
+
+  _removeOverClass(item) {
+    item.removeOverClass();
+  }
+}

components/file-upload/file-item.ts

@@ -0,0 +1,134 @@
+import {FileLikeObject} from './file-like-object';
+import {FileUploader} from './file-uploader';
+import Form = ng.Form;
+
+export class FileItem {
+  public file:FileLikeObject;
+  public _file:File;
+  public alias:string = 'file';
+  public url:string = '/';
+  public method:string = 'POST';
+  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 = null;
+
+  constructor(private uploader:FileUploader, private some:any, private options:any) {
+    this.file = new FileLikeObject(some);
+    this._file = some;
+    this.url = uploader.url;
+  }
+
+  public upload() {
+    try {
+      this.uploader.uploadItem(this);
+    } catch (e) {
+      this.uploader._onCompleteItem(this, '', 0, []);
+      this.uploader._onErrorItem(this, '', 0, []);
+    }
+  }
+
+  public cancel() {
+    this.uploader.cancelItem(this);
+  }
+
+  public remove() {
+    this.uploader.removeFromQueue(this);
+  }
+
+  public onBeforeUpload() {
+  }
+
+  public onProgress(progress) {
+  }
+
+  public onSuccess(response, status, headers) {
+  }
+
+  public onError(response, status, headers) {
+  }
+
+  public onCancel(response, status, headers) {
+  }
+
+  public onComplete(response, status, headers) {
+  }
+
+  private _onBeforeUpload() {
+    this.isReady = true;
+    this.isUploading = true;
+    this.isUploaded = false;
+    this.isSuccess = false;
+    this.isCancel = false;
+    this.isError = false;
+    this.progress = 0;
+    this.onBeforeUpload();
+  }
+
+  private _onProgress(progress) {
+    this.progress = progress;
+    this.onProgress(progress);
+  }
+
+  private _onSuccess(response, status, headers) {
+    this.isReady = false;
+    this.isUploading = false;
+    this.isUploaded = true;
+    this.isSuccess = true;
+    this.isCancel = false;
+    this.isError = false;
+    this.progress = 100;
+    this.index = null;
+    this.onSuccess(response, status, headers);
+  }
+
+  private _onError(response, status, headers) {
+    this.isReady = false;
+    this.isUploading = false;
+    this.isUploaded = true;
+    this.isSuccess = false;
+    this.isCancel = false;
+    this.isError = true;
+    this.progress = 0;
+    this.index = null;
+    this.onError(response, status, headers);
+  }
+
+  private _onCancel(response, status, headers) {
+    this.isReady = false;
+    this.isUploading = false;
+    this.isUploaded = false;
+    this.isSuccess = false;
+    this.isCancel = true;
+    this.isError = false;
+    this.progress = 0;
+    this.index = null;
+    this.onCancel(response, status, headers);
+  }
+
+  private _onComplete(response, status, headers) {
+    this.onComplete(response, status, headers);
+
+    if (this.uploader.removeAfterUpload) {
+      this.remove();
+    }
+  }
+
+  private _destroy() {
+  }
+
+  private _prepareToUploading() {
+    this.index = this.index || ++this.uploader._nextIndex;
+    this.isReady = true;
+  }
+
+  _replaceNode(input) {
+  }
+}

components/file-upload/file-like-object.ts

@@ -0,0 +1,32 @@
+function isElement(node) {
+  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;
+
+  constructor(fileOrInput:any) {
+    let isInput = isElement(fileOrInput);
+    let fakePathOrObject = isInput ? fileOrInput.value : fileOrInput;
+    let postfix = typeof fakePathOrObject === 'string' ? 'FakePath' : 'Object';
+    let method = '_createFrom' + postfix;
+    this[method](fakePathOrObject);
+  }
+
+  public _createFromFakePath(path) {
+    this.lastModifiedDate = null;
+    this.size = null;
+    this.type = 'like/' + path.slice(path.lastIndexOf('.') + 1).toLowerCase();
+    this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
+  }
+
+  public _createFromObject(object) {
+    // this.lastModifiedDate = copy(object.lastModifiedDate);
+    this.size = object.size;
+    this.type = object.type;
+    this.name = object.name;
+  }
+}

components/file-upload/file-select.ts

@@ -1,21 +1,56 @@
 /// <reference path="../../tsd.d.ts" />
 
 import {
-  Component, View,
+  Component, View, OnInit, OnDestroy, OnChanges,
   Directive, LifecycleEvent,
   EventEmitter, ElementRef, Renderer,
   CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
 } from 'angular2/angular2';
 
+import {FileUploader} from './file-uploader';
+
+// todo: filters
+
 @Directive({
   selector: '[ng2-file-select]',
-  properties: ['config: ng2FileSelect']
+  properties: ['config: ng2FileSelect', 'uploader'],
+  host: {
+    '(change)': 'onChange()'
+  }
 })
 export class FileSelect {
+  public uploader:FileUploader;
   public config:any = {};
 
-  constructor(private element:ElementRef, private renderer:Renderer) {
-    console.log('it works!');
+  constructor(private element:ElementRef) {
+  }
+
+  public getOptions() {
+    return this.uploader.options;
+  }
+
+  public getFilters() {
+  }
+
+  public isEmptyAfterSelection():boolean {
+    return !!this.element.nativeElement.attributes.multiple;
+  }
+
+  onChange() {
+    // 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);
+    if (this.isEmptyAfterSelection()) {
+      // todo
+      // this.element.nativeElement.properties.value = '';
+      /*this.element.nativeElement
+       .replaceWith(this.element = this.element.nativeElement.clone(true)); // IE fix*/
+    }
   }
 }