Skip to content

Commit

Permalink
minor
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkuri
jkuri committed Nov 20, 2016
1 parent f47455e commit 5d171ad
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 3 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "ng2-uploader",
"description": "Angular2 File Uploader",
"version": "1.5.0",
"version": "1.5.1",
"license": "MIT",
"main": "ng2-uploader.js",
"typings": "ng2-uploader.d.ts",
Expand Down
8 changes: 6 additions & 2 deletions src/directives/ng-file-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ export class NgFileSelectDirective {
@Output() onPreviewData: EventEmitter<any> = new EventEmitter();
@Output() onUploadRejected: EventEmitter<UploadRejected> = new EventEmitter<UploadRejected>();

_options:any;
_options: any;

@Input()
get options(): any {
return this._options;
}

@Input('options')
set options(value: any) {
this._options = value;
this.uploader.setOptions(this.options);
Expand Down Expand Up @@ -82,6 +82,10 @@ export class NgFileSelectDirective {
}

@HostListener('change') onChange(): void {
if (!this.el.nativeElement.files) {
return;
}

this.files = Array.from(this.el.nativeElement.files);
if (this.options.filterExtensions && this.options.allowedExtensions) {
this.filterFilesByExtension();
Expand Down

8 comments on commit 5d171ad

@MaxiSantos
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I see you restored the change on #128 which was merged to master with this commit #129. And now I see again the bug #87.

Could you explain us if #87 is a real bug? And if that so, tell us why you restored that change so maybe I can work on other fix.

@jkuri
Copy link
Contributor Author

@jkuri jkuri commented on 5d171ad Nov 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its not a real bug. This means that module is not properly included. Please check your console for errors.

@MaxiSantos
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I guess you are not having this issue:

zone.js:388Unhandled Promise rejection: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'input'. ("


          <input type="file" ngFileSelect [ERROR ->][options]="basicOptions" (onUpload)="handleUpload($event)">

          <div>
"): EditAccountComponent@11:42 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'input'. ("


          <input type="file" ngFileSelect [ERROR ->][options]="basicOptions" (onUpload)="handleUpload($event)">

I don't undesrtand why the issue may be related with the way I'm using modules cause I'm using them with other modules, components, services and they are correctly called from other places.

For Ng2UploaderModule I'm using this on a sharedModule

@NgModule({
  imports: [CommonModule, Ng2UploaderModule],
...
exports: [...,Ng2UploaderModule ...]

And then on the components I want to use it I import the shared module

@NgModule({
  declarations: [
// all related components
  ],
  imports: [
    homeRoutes,
    SharedModule
  ]
})

If I change the Input() decorator above the options property definded with the get then I no longer see the issue with the binding.

@jkuri
Copy link
Contributor Author

@jkuri jkuri commented on 5d171ad Nov 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you check your network tab if ng2-uploader.js gets loaded?

@MaxiSantos
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see ng2-uploader.js on network-tab.. neither if I change the input() decorator above the getter (in which case the issue with the options binding disapear). I'm still new on angular, didn't make any build yet.

I also found this other issue related on how to declare a property binding.
http://stackoverflow.com/questions/36653678/angular2-input-to-a-property-with-get-set. That guy has the exact same issue we are seeing with the [options] binding and on the plunker they provide the issue is solved by setting the Input() decorator above the getter.

@jkuri
Copy link
Contributor Author

@jkuri jkuri commented on 5d171ad Nov 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have this a project or starter which you can share (append) .zip here? I have time right now and I can take a look.

@MaxiSantos
Copy link

@MaxiSantos MaxiSantos commented on 5d171ad Nov 21, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I can't. But I have the plunker modified where you can check the Input() decorator doesn't work above the setter.

https://plnkr.co/edit/LgVtWlSZjrXRMWvJvCIe?p=preview

This is my package.json

"dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/material": "2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "@angular/upgrade": "~2.2.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "hammerjs": "^2.0.8",
    "ng2-uploader": "^1.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/hammerjs": "^2.0.33",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "@angular/platform-server": "^2.1.2",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "^2.0.6"
  }

@MaxiSantos
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, it looks this was an old bug on angular I guess angular/angular#5477.

So it looks the workaround is to declare the Input() decorator at first... (no matter if it's on the getter or setter)

But I don't understand why it's working with some people and not for others. Defenitely it's not a bug from ng-upload module. I'd like to know which configuration we are missing.

Please sign in to comment.