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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

Thanks @Davy-F

Thanks @Davy-F

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

Copy Link

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

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

Copy Source

@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

Copy Source

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

Copy Source

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 labels bug

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

allan (Allan) medjedovic (Mihajlo Medjedovic) root sabhas (Sabir Hassan)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#402