fix(forms): add support for reactive forms #402

New Issue

Closed

opened 2016-09-19 22:35:10 +00:00 by waynechaw · 18 comments

waynechaw commented 2016-09-19 22:35:10 +00:00 (Migrated from github.com)

Copy Link

is this compatible with angular 2.0 that was just officially released?

is this compatible with angular 2.0 that was just officially released?

bromzh commented 2016-09-20 06:16:42 +00:00 (Migrated from github.com)

Copy Link

Works well in my project. Project uses angular@2.0.0.

Works well in my project. Project uses angular@2.0.0.

Davy-F commented 2016-09-20 07:46:51 +00:00 (Migrated from github.com)

Copy Link

How did you get it to work on 2.0.0? I get the following error, even though paths are correct:

This happened as soon as I updated. It was working on prior versions.

Edit: I just had another crack at this, and got it working. I had to change my system.config.js to the following:

map: {
  ng2-file-upload':            'npm:ng2-file-upload'
    },
    packages: {
    ...
      'ng2-file-upload': {
        defaultExtension: 'js'
      }
    }`

and change my imports from:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

to

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload';

So, yes - it is supported!

How did you get it to work on 2.0.0? I get the following error, even though paths are correct:  This happened as soon as I updated. It was working on prior versions. **Edit**: I just had another crack at this, and got it working. I had to change my system.config.js to the following: ``` map: { ng2-file-upload': 'npm:ng2-file-upload' }, packages: { ... 'ng2-file-upload': { defaultExtension: 'js' } }` ``` and change my imports from: `import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';` to `import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload';` So, **yes - it is supported!**

hiddeb-zz commented 2016-09-20 09:37:24 +00:00 (Migrated from github.com)

Copy Link

can you show the code of the component and template?

I get the error uploader isn't a type of input

can you show the code of the component and template? I get the error uploader isn't a type of input

Davy-F commented 2016-09-20 10:02:45 +00:00 (Migrated from github.com)

Copy Link

Hope this helps.

HTML Template:

<div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-5">
      <input type="file" class="app-button title-button" ng2FileSelect [uploader]="uploader" />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <button type="button" (click)="handleUpload()" class="app-button title-button" [disabled]="!uploader.getNotUploadedItems().length">
        <i class="fa fa-upload"></i> Upload
      </button>
    </div>
  </div>

  <div style="padding-top: 20px;">
    <div class="progress">
        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }">
            {{uploadStatus}}
        </div>
    </div>
  </div>
</div>

Component (extracted only the relevant code):

import {Component, OnInit, NgZone, AfterViewInit, ViewChild} from '@angular/core';
import {NgClass} from '@angular/common';
import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload';
import {CredentialManagementService} from '../../../services/credential-management.service';
import {apiHost} from '../../../exports/api-host.var';

const URL = `${apiHost}/imports`;

@Component({
  selector: 'import',
  templateUrl: '/app/components/page-components/import/import.component.html',
  styleUrls: ['app/components/page-components/import/import.component.css'],
  providers: [CredentialManagementService]
})
export class ImportComponent implements AfterViewInit {
    public uploader: FileUploader = new FileUploader({ url: URL });
    public uploadStatus: string;

  constructor(private _credentialManagementService : CredentialManagementService) { }

  handleUpload() : void {
      this.uploadStatus = "Uploading...";
      var token = this._credentialManagementService.getMappedCredentials();
      this.uploader.authToken = token.tokenType + ' ' + token.accessToken;
      this.uploader.uploadAll();
      this.uploadStatus = "Upload complete. Import in progress.";
      this._toastService.success('Upload', this.uploadStatus, 5000);
      setTimeout(() => this.reloadHistory(), 5000);
  }
}

Hope this helps. **HTML Template:** ``` <div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-5"> <input type="file" class="app-button title-button" ng2FileSelect [uploader]="uploader" /> </div> <div class="col-xs-12 col-sm-3 col-md-2"> <button type="button" (click)="handleUpload()" class="app-button title-button" [disabled]="!uploader.getNotUploadedItems().length"> <i class="fa fa-upload"></i> Upload </button> </div> </div> <div style="padding-top: 20px;"> <div class="progress"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"> {{uploadStatus}} </div> </div> </div> </div> ``` **Component (extracted only the relevant code):** ``` import {Component, OnInit, NgZone, AfterViewInit, ViewChild} from '@angular/core'; import {NgClass} from '@angular/common'; import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload/ng2-file-upload'; import {CredentialManagementService} from '../../../services/credential-management.service'; import {apiHost} from '../../../exports/api-host.var'; const URL = `${apiHost}/imports`; @Component({ selector: 'import', templateUrl: '/app/components/page-components/import/import.component.html', styleUrls: ['app/components/page-components/import/import.component.css'], providers: [CredentialManagementService] }) export class ImportComponent implements AfterViewInit { public uploader: FileUploader = new FileUploader({ url: URL }); public uploadStatus: string; constructor(private _credentialManagementService : CredentialManagementService) { } handleUpload() : void { this.uploadStatus = "Uploading..."; var token = this._credentialManagementService.getMappedCredentials(); this.uploader.authToken = token.tokenType + ' ' + token.accessToken; this.uploader.uploadAll(); this.uploadStatus = "Upload complete. Import in progress."; this._toastService.success('Upload', this.uploadStatus, 5000); setTimeout(() => this.reloadHistory(), 5000); } } ```

hiddeb-zz commented 2016-09-21 07:49:03 +00:00 (Migrated from github.com)

Copy Link

Thanks @Davy-F

Thanks @Davy-F

Davy-F commented 2016-09-21 08:04:23 +00:00 (Migrated from github.com)

Copy Link

No problem, @hiddeb. Did you get it all working?

No problem, @hiddeb. Did you get it all working?

hiddeb-zz commented 2016-09-21 08:14:34 +00:00 (Migrated from github.com)

Copy Link

no is still get this error
`Unhandled Promise rejection:

Template parse errors:
Can't bind to 'uploader' since it isn't a known property of 'input'. (" document...

    <input class="thumb hide-document-button" type="file"  ng2FileSelect [ERROR ->][uploader]="uploader"  />
</div>`

no is still get this error `Unhandled Promise rejection: Template parse errors: Can't bind to 'uploader' since it isn't a known property of 'input'. (" document... ``` <input class="thumb hide-document-button" type="file" ng2FileSelect [ERROR ->][uploader]="uploader" /> </div>` ```

Davy-F commented 2016-09-21 08:22:50 +00:00 (Migrated from github.com)

Copy Link

In your App,Module are you importing both FormsModule and ReactiveFormsModule?

In your App,Module are you importing both FormsModule and ReactiveFormsModule?

hiddeb-zz commented 2016-09-21 08:35:21 +00:00 (Migrated from github.com)

Copy Link

yes FormsModule and ReactiveFormsModule are imported, but i still get the error

yes FormsModule and ReactiveFormsModule are imported, but i still get the error

Davy-F commented 2016-09-21 08:49:31 +00:00 (Migrated from github.com)

Copy Link

Hmm, could you post your code?
It seems valor are readying a new release rather soon so it might be worth holding out and trying that first.

Hmm, could you post your code? It seems valor are readying a new release rather soon so it might be worth holding out and trying that first.

hiddeb-zz commented 2016-09-21 09:05:36 +00:00 (Migrated from github.com)

Copy Link

Html template:
`

<div class="thumb document-border document-border-{{ document.status }}" *ngIf="document.file" [ngStyle]="{'background-image': 'url(' + document.file + ')'}">

        <span class="label label-{{ document.status }}" *ngIf="document.icon" >
            <i class="fa {{ document.icon }}"></i>
        </span>

</div>
<div class="thumb no-document well my-drop-zone" *ngIf="document.file == ''" id="file_upload_{{ document.id }}">

    Kies of sleep uw
    document...

    <input class="thumb hide-document-button" type="file"  ng2FileSelect [uploader]="uploader"  />
</div>

<div class="progress document-upload-progressbar" style="" *ngIf="document.file == ''" >
    <div class="progress-bar" role="progressbar"></div>
</div>

<p class="truncate" title="{{ document.name }}">{{ document.name }}</p>

`

Component:
`import {Component, OnInit, Input } from '@angular/core';
import { FileUploader, FileUploaderOptions } from 'ng2-file-upload/ng2-file-upload';

import { Document } from '../model/document';

@Component({
selector: 'kp-document',
templateUrl: 'app/document/document.component.html'
})

export class DocumentComponent implements OnInit {
@Input()
document: Document;

private uploaderOptions:FileUploaderOptions =  {
    // allowedMimeType: ['pdf'],
    // allowedFileType: ['pdf'],
    autoUpload: true,
    // isHTML5:  true,
    // maxFileSize: 15,
    queueLimit: 1,
    removeAfterUpload: false
};

public uploader:FileUploader = new FileUploader(this.uploaderOptions);
public hasBaseDropZoneOver:boolean = false;
public uploadStatus: string;

public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
}

ngOnInit(): void {
    this.uploader.setOptions({url: 'https://evening-anchorage-3159.herokuapp.com/api/' + this.document.id});
}

}`

Html template: `<div class="item"> <div class="thumb document-border document-border-{{ document.status }}" *ngIf="document.file" [ngStyle]="{'background-image': 'url(' + document.file + ')'}"> ``` <span class="label label-{{ document.status }}" *ngIf="document.icon" > <i class="fa {{ document.icon }}"></i> </span> </div> <div class="thumb no-document well my-drop-zone" *ngIf="document.file == ''" id="file_upload_{{ document.id }}"> Kies of sleep uw document... <input class="thumb hide-document-button" type="file" ng2FileSelect [uploader]="uploader" /> </div> <div class="progress document-upload-progressbar" style="" *ngIf="document.file == ''" > <div class="progress-bar" role="progressbar"></div> </div> <p class="truncate" title="{{ document.name }}">{{ document.name }}</p> ``` </div>` Component: `import {Component, OnInit, Input } from '@angular/core'; import { FileUploader, FileUploaderOptions } from 'ng2-file-upload/ng2-file-upload'; import { Document } from '../model/document'; @Component({ selector: 'kp-document', templateUrl: 'app/document/document.component.html' }) export class DocumentComponent implements OnInit { @Input() document: Document; ``` private uploaderOptions:FileUploaderOptions = { // allowedMimeType: ['pdf'], // allowedFileType: ['pdf'], autoUpload: true, // isHTML5: true, // maxFileSize: 15, queueLimit: 1, removeAfterUpload: false }; public uploader:FileUploader = new FileUploader(this.uploaderOptions); public hasBaseDropZoneOver:boolean = false; public uploadStatus: string; public fileOverBase(e:any):void { this.hasBaseDropZoneOver = e; } ngOnInit(): void { this.uploader.setOptions({url: 'https://evening-anchorage-3159.herokuapp.com/api/' + this.document.id}); } ``` }`

valorkin commented 2016-09-21 09:10:04 +00:00 (Migrated from github.com)

Copy Link

Can you please assemble sample plunker or repo?
So I can fix it fast?

Can you please assemble sample plunker or repo? So I can fix it fast?

hiddeb-zz commented 2016-09-21 09:30:12 +00:00 (Migrated from github.com)

Copy Link

this is the plunker link: https://plnkr.co/edit/IcX2bS8VnasZHPIeNd9B

but i cant get it to work there

this is the plunker link: https://plnkr.co/edit/IcX2bS8VnasZHPIeNd9B but i cant get it to work there

Davy-F commented 2016-09-21 09:44:19 +00:00 (Migrated from github.com)

Copy Link

In your config.js you don't seem to be importing ng2-file-upload?
Also your app.ts will need to import FormsModule and ReactiveFormsModule as follows in this example:

import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule,],      
  declarations: [ AppComponent], 
  bootstrap: [ AppComponent ],   
  providers: [ ]
})
export class AppModule { }

Give those few things a go?

In your config.js you don't seem to be importing ng2-file-upload? Also your app.ts will need to import FormsModule and ReactiveFormsModule as follows in this example: ``` import {BrowserModule} from '@angular/platform-browser'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule,], declarations: [ AppComponent], bootstrap: [ AppComponent ], providers: [ ] }) export class AppModule { } ``` Give those few things a go?

hiddeb-zz commented 2016-09-21 10:27:03 +00:00 (Migrated from github.com)

Copy Link

i get a different error,plunkr cant find document.ts.
But this is how we use it in our project

i get a different error,plunkr cant find document.ts. But this is how we use it in our project

elvisbegovic commented 2016-09-22 13:43:42 +00:00 (Migrated from github.com)

Copy Link

@hiddeb @Davy-F do you achieve this plnkr ? have you a valid plnkr for this component ng2-file-upload because my is still broken http://plnkr.co/edit/mjMCKvFV1m2tch2BxSl6?p=preview

@hiddeb @Davy-F do you achieve this plnkr ? have you a valid plnkr for this component ng2-file-upload because my is still broken http://plnkr.co/edit/mjMCKvFV1m2tch2BxSl6?p=preview

bborad commented 2016-12-01 01:21:33 +00:00 (Migrated from github.com)

Copy Link

did anyone get it working with angular2

did anyone get it working with angular2

bborad commented 2016-12-01 01:22:46 +00:00 (Migrated from github.com)

Copy Link

I am getting error

Unexpected value 'FileUploader' imported by the module 'AppModule'

I am getting error Unexpected value 'FileUploader' imported by the module 'AppModule'

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

development

rqx110/patch-1

fix-publish-npm

dependabot/npm_and_yarn/minimatch-3.0.5

dependabot/npm_and_yarn/decode-uri-component-0.2.2

dependabot/npm_and_yarn/loader-utils-and-loader-utils-and-angular-devkit/build-angular-and-nrwl/angular-3.2.1

dependabot/npm_and_yarn/loader-utils-and-loader-utils-and-nrwl/angular-3.2.0

dependabot/npm_and_yarn/marked-and-markdown-loader-4.1.0

xCall/development

yauhenkashko/fail-filter-index

animalus/allow-params-null

cagdasoezguer/queuesizelimit

vmachavolu/development

gh-pages

duykhang53/development

rahil471/development

gkfirst8/development

Marc-Hansen/development

PauloPeres/development

koenvanderlinden/queuesizelimit

koenvanderlinden/democodepatch

koenvanderlinden/add-dwf

koenvanderlinden/multiupload-singlepost

mattmcsparran/patch-2

infinum/feature/filters-as-promise

ravinderpayal/development

master

v3.0.0

v2.0.0-3

v2.0.0-2

v2.0.0-1

v2.0.0-0

v1.2.0

v1.1.3-0

v1.1.2

v1.1.1

v1.1.0

v1.0.3

v1.0.2

Labels

Clear labels

bug

dependencies

Pull requests that update a dependency file

duplicate

enhancement

greenkeeper

help wanted

in progress

invalid

need to reproduce

question

status: pending

wontfix

No Label bug

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

allan medjedovic root sabhas

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#402