private fineUploader: FineUploaderBasic;
private fineUploaderOptions: UIOptions;

ngOnInit() {
  this.dialogRef.updateSize('80%', '80%');

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', 'bpm', 'gif'],
      sizeLimit: 50 * 1024 * 1024, // 50 KB
    },
    element: this.elementRef.nativeElement.querySelector('[fine-uploader]')
  };
  this.fineUploader = new FineUploaderBasic(this.fineUploaderOptions);
  this.fineUploader.setEndpoint('/api/User/UploadImage');
}

/// <reference types="fine-uploader" />
import { Component, Inject, ElementRef } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdInputModule, MdSlideToggleModule } from '@angular/material';
import { UserModel } from 'app/models/user-model';
import { FormGroup, FormBuilder, Validators, ValidatorFn, AbstractControl, FormControl } from '@angular/forms';
import { FineUploaderBasic } from 'fine-uploader/lib/core';
import { UIOptions } from 'fine-uploader';

@Component({
  selector: 'user-dialog',
  templateUrl: 'user-dialog.component.html',
  styleUrls: ['./user-dialog.component.css']
})
export class UserDialogComponent {
  constructor(public dialogRef: MdDialogRef<UserDialogComponent>,
    @Inject(MD_DIALOG_DATA) public data: any,
    private elementRef: ElementRef,
    private formBuilder: FormBuilder) {
    this.createForm();
  }

ngOnInit() {
  this.dialogRef.updateSize('80%', '80%');

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', 'bpm', 'gif'],
      sizeLimit: 50 * 1024 * 1024, // 50 KB
    },
    element: this.elementRef.nativeElement.querySelector('[fine-uploader]')
  };
  this.fineUploader = new FineUploaderBasic(this.fineUploaderOptions);
  this.fineUploader.setEndpoint('/api/User/UploadImage');
}

  private fineUploader: FineUploaderBasic;
  private fineUploaderOptions: UIOptions;
  private model: UserModel = new UserModel();
  private userForm: FormGroup;

  private passwordMatchValidator() {
    if (!this.userForm) return null;
    if ((this.userForm.get('Id').value > 0 || this.userForm.get('PasswordChange')) &&
      this.userForm.get('Password').value !== this.userForm.get('PasswordConfirm').value)
      return { NotEqual: true };
  }

  createForm(): void {
    this.userForm = this.formBuilder.group({
      Id: [0, Validators.required],
      FullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
      Username: ['', Validators.required],
      Password: ['', [Validators.minLength(2)]],
      PasswordConfirm: ['', [this.passwordMatchValidator.bind(this)]],
      PasswordChange: false,
      Email: ['', [Validators.required, Validators.email]],
      IsAdmin: [false, Validators.required],
      LanguageId: [1, Validators.required],
      StatusId: [1, Validators.required],
      ImagePath: ''
    });
  }

  onSubmit() {

  }

  cancelButtonOnClick() {
    this.dialogRef.close();
  }
}

<div class="container" style="direction:rtl;">
  <h4>مشخصات ...</h4>
  <hr />
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate>
    <input type="hidden" formControlName="Id" />
    <div class="row">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="text" i18n-placeholder placeholder="نام نام خانوادگی" formControlName="FullName" />
        </md-form-field>
      </div>
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="text" i18n-placeholder placeholder="نام کاربری" formControlName="Username" style="direction: ltr;" />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="email" i18n-placeholder placeholder="پست الکترونیک" formControlName="Email" style="direction: ltr;"
          />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <md-slide-toggle i18n formControlName="IsAdmin">کاربر مدیر است؟</md-slide-toggle>
      </div>
      <div class="col-sm-6" *ngIf="userForm.get('Id').value > 0">
        <md-slide-toggle i18n formControlName="PasswordChange">رمز عبور تغییر داده شود</md-slide-toggle>
      </div>
    </div>
    <div class="row" *ngIf="userForm.get('PasswordChange').value || userForm.get('Id').value <= 0">
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="password" i18n-placeholder placeholder="رمز عبور" formControlName="Password" required style="direction: ltr;"
          />
        </md-form-field>
      </div>
      <div class="col-sm-6">
        <md-form-field>
          <input mdInput type="password" i18n-placeholder placeholder="تکرار رمز عبور" formControlName="PasswordConfirm" style="direction: ltr;"
          />
        </md-form-field>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div fine-uploader>Uploader Container</div>
      </div>
    </div>
    <hr />
    <button md-button i18n type="submit" [disabled]="!userForm.valid">ثبت</button>
    <button md-button i18n type="button" (click)="cancelButtonOnClick()">انصراف</button>
  </form>
</div>

<script type="text/template" id="qq-template">
  <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
    <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
      <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
    </div>
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
      <span class="qq-upload-drop-area-text-selector"></span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
      <div>Upload a file</div>
    </div>
    <span class="qq-drop-processing-selector qq-drop-processing">
              <span>Processing dropped files...</span>
    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
    </span>
    <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
      <li>
        <div class="qq-progress-bar-container-selector">
          <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
        </div>
        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
        <span class="qq-upload-file-selector qq-upload-file"></span>
        <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
        <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
        <span class="qq-upload-size-selector qq-upload-size"></span>
        <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
        <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
        <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
      </li>
    </ul>

    <dialog class="qq-alert-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Close</button>
      </div>
    </dialog>

    <dialog class="qq-confirm-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">No</button>
        <button type="button" class="qq-ok-button-selector">Yes</button>
      </div>
    </dialog>

    <dialog class="qq-prompt-dialog-selector">
      <div class="qq-dialog-message-selector"></div>
      <input type="text">
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector">Cancel</button>
        <button type="button" class="qq-ok-button-selector">Ok</button>
      </div>
    </dialog>
  </div>
</script>