Ng2-file-upload - Can't bind to 'uploader' since it isn't a known property

Ionic Framework ionic-v3
1

Having trouble with ng2-file-upload again.

This used to work:
PWA approach to uploading files

But now I cannot get past this error:
Uncaught (in promise): Error: Template parse errors: Can't bind to 'uploader' since it isn't a known property of 'input'.

This example is not working:

Any advice / examples?

2

This is killing me now as well. I’ve tried so many flavors of importing and declaring and read pages and pages of stackoverflow. My project compiles but nothing happens when I drop files into the ng2FileDrop div.
I do see the error that is the title of the thread but only in Visual Studio Code.
I assume nothing happens after dropping files because the uploader isn’t wired up correctly?
Anyone gotten this to work?

3

Wait - did this just work? I changed [uploader]="uploader" to (uploader)="uploader"
(changed the square brackets to parenthesis)

edit 1
No- maybe false alarm. My dragged image just ended up loading in the browser tab I was using… :frowning:

edit 2
With the square brackets back, the dropped files do not open in the browser tab, but I don’t see any attempt to upload anything in the network view. And, I still have the “isn’t a known property” error in vs code.

4

This works for me:

5

If you have a File object, I think you need to read it in. I am using readAsDataURL to get something I can assign to an HTML img src:

      var reader = new FileReader();
      reader.onload = (fileEvent) => {
        (this.testImage.nativeElement as HTMLImageElement).src = reader.result;
      }
      var url = reader.readAsDataURL(file);
6

For displaying it, yes.

7

I now add the FileUploadModule to the module.ts and include it in the imports.
FileSelectDirective is part of FileUploadModule so it no longer needs to be imported.
(FileSelectDirective must be removed from all other page modules or it will break during build --prod)

With the following, a drop zone can now be added to a div in a lazy loaded IonicPage.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UploadPage } from './upload';
//import { FileSelectDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload';
@NgModule({
  declarations: [
    UploadPage,
    //FileSelectDirective,
  ],
  imports: [
    FileUploadModule,
    IonicPageModule.forChild(UploadPage),
  ],
  exports:[
    UploadPage
  ]
})
export class UploadPageModule {}