Search code examples
angularangular6ng2-file-upload

Angular 6 : Can't bind to 'uploader'


I am trying to upload a video for that I used ng2-file-upload module into my application.

This is the error which I got :

ERROR in : Can't bind to 'uploader' since it isn't a known property of 'input'. (">single</label>
                <input type="file" class="form-control" name="single" ng2FileSelect [ERROR ->][uploader]="uploader" />
              </div>
            </div>
")

app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { TranslateModule } from '@ngx-translate/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FileUploadModule} from 'ng2-file-upload';

import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HomeModule } from './home/home.module';
import { ShellModule } from './shell/shell.module';
import { AboutModule } from './about/about.module';
import { LoginModule } from './login/login.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {AppContentModule} from '@app/app-content/appContent.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    TranslateModule.forRoot(),
    NgbModule,
    CoreModule,
    SharedModule,
    ShellModule,
    HomeModule,
    AppContentModule,
    AboutModule,
    LoginModule,
    FileUploadModule,
    AppRoutingModule // must be imported as the last module as it contains the fallback route
  ],
  declarations: [AppComponent],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

video.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { FileUploader } from 'ng2-file-upload';

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
  @Input() data: any;

  public uploader:FileUploader = new FileUploader({url:'http://46.101.253.10:3000/upload'});

  constructor(private modalService: NgbModal,
              private formBuilder: FormBuilder) { }
  ngOnInit() {
  }  
}

video.component.html

<div class="form-group">
                <label for="single">single</label>
                <input type="file" class="form-control" name="single" ng2FileSelect [uploader]="uploader" />                                  
              </div>

I have tried multiple combinations of imports for 'FileUploadModule' in my app.module but not work with me.

Have googled many posts for solutions for the same but none helping

Can I someone help me please ?


Solution

  • I don't have enough reputation to comment, so adding it here:

    Where do you import the VideoComponent its not part of the app.module?

    Also, Have a look at this answer. It seems to be supported. I don't see much difference from your solution except that Video component is missing