How can we use fine-uploader with Angular 5?

Question

I read https://docs.fineuploader.com/branch/master/features/modules.html
So I done these steps:

- Install fine uploader via npm install fine-uploader --save

- Add to .angular-cli.json

"styles": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader-gallery.min.css"
],
"scripts": [
    "../node_modules/fine-uploader/fine-uploader/fine-uploader.min.js"
],

- Creating fine uploader instance

/// 
import { FineUploaderBasic } from 'fine-uploader/lib/core';
import { UIOptions } from 'fine-uploader';

private fineUploader: FineUploaderBasic;
private fineUploaderOptions: UIOptions;

ngOnInit() {      

  this.fineUploaderOptions = {
    validation: {
      allowedExtensions: ['jpg', 'jpeg', 'png', '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');
}

But it doesn't work yet! without any log in browser's console

My component completely:

/// 
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,
    @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();
  }
}

My component template completely:


  مشخصات ...
  
  
    
    
      
        
          
        
      
      
        
          
        
      
    
    
      
        
          
        
      
    
    
      
        کاربر مدیر است؟
      
      
        رمز عبور تغییر داده شود
      
    
    
      
        
          
        
      
      
        
          
        
      
    
    
      
        Uploader Container

How can we use fine-uploader with Angular 5?

1 Answers