1

I read previous questions and the solutions to the answers were already in place, which is why I started another question

I get the following error with ng2-file-upload in Angular 5:

    Uncaught Error: Template parse errors:
Can't bind to 'uploader' since it isn't a known property of 'div'. ("s': hasAnotherDropZoneOver}"
                 (fileOver)="fileOverAnother($event)"
                 [ERROR ->][uploader]="uploader"
                 class="well my-drop-zone">
                Another drop zone
"): ng:///AppModule/UploadComponent.html@25:17
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24312)
    at JitCompiler._parseTemplate (compiler.js:33699)
    at JitCompiler._compileTemplate (compiler.js:33674)
    at eval (compiler.js:33576)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33576)
    at eval (compiler.js:33446)
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33445)

I imported and declared the directive into my app.module.ts and the error persisted. Has anyone had this issue with ng-file-upload and angular 5?

msanford
  • 11,803
  • 11
  • 66
  • 93
Matt
  • 1,068
  • 6
  • 10
  • 1
    Do you have `schemas: [CUSTOM_ELEMENTS_SCHEMA],` in your main `@NgModule`? – msanford Dec 04 '17 at 18:19
  • 1
    @msanford yeah, i do. I actually figured it out. see the answer below. it won't let me mark it as answered though. I literally just figured it out after i posted it. – Matt Dec 04 '17 at 18:22
  • 1
    Sweet! Yeah you have to come back in a few days to accept it, but please do once the timer expires. – msanford Dec 04 '17 at 18:23
  • 1
    @msanford definitely. Thanks for your help! – Matt Dec 04 '17 at 18:24

2 Answers2

2

FileUploadModule needs to be imported and added to imports in the module declaring the component.

import { FileUploadModule } from "ng2-file-upload";   //Should import HERE

imports: [  ...FileUploadModule ... ]   //RIGHT PLACE

Angular 2: Can't bind to 'uploader' since it isn't a known property of 'input'

Matt
  • 1,068
  • 6
  • 10
  • You changed it from a parameter binding to an event binding? And that actually works? I don't know anything about ng-uploader but that seems super weird to me, since those two things (obviously) work in opposite 'directions'. Any idea what the core problem was? – msanford Dec 04 '17 at 18:25
  • huh? property binding to event binding works for you? – Mujah Maskey Dec 04 '17 at 19:45
0

In the respective module.ts file add 

import { FileUploadModule  } from 'ng2-file-upload';

Add it under import 
  @NgModule({
      imports: [
         FileUploadModule
      ]
})

<b>Import FileUploaderOptions,FileUploader into your .ts file </b>

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

In this class .ts file, add entries 

  options: FileUploaderOptions;
  uploader: FileUploader = new FileUploader(this.options);

<b>In the ngOnInit() add the text </b>

    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
        console.log('file:uploaded:', item, status, response);
        alert('File uploaded successfully');
    }

In the HTML file add the select button 

      <div>
        <input type="file" name="photo" ng2FileSelect  [uploader]="uploader" />
        <button type="button" class="btn btn-success btn-s" 
          (click)="uploader.uploadAll()" 
          [disabled]="!uploader.getNotUploadedItems().length" >
              Upload file
        </button>
      </div>
user1416932
  • 257
  • 3
  • 6