Module <my-app>/node_modules/angular2-file-drop/build/index"' has no exported member 'FileDropDirective'.

[petervojtek]

when I add this line:

import { FileDropDirective } from 'angular2-file-drop'

to angular 2.3.0, it fails with:

Module '"<my-app>/node_modules/angular2-file-drop/build/index"' has no exported member 'FileDropDirective'.

[petervojtek]

when I try to change

import { FileDropDirective } from 'angular2-file-drop'

to

import { FileDropModule } from 'angular2-file-drop'

I experience #18.

[marsdk]

+1 on this one.

[subatomicglue]

I get this as well:

ERROR in <myapp>/src/app/my.component.ts (4,10): 
Module '"<myapp>/node_modules/angular2-file-drop/build/index"' has no exported member 'FileDropDirective'.)

<myapp>/src/app/my.component.ts (12,3): 
Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; directives: any[]; }' is not assignable to parameter of type 'Component'.                                

  Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.)                                                                                 

To fix the 2nd one: I use providers instead of directives To fix the 1st one: I use FileDropModule instead of FileDropDirective

Please update your README.md to help others get started with your package

Can't bind to 'options' since it isn't a known property of 'div'. ("
<div fileDrop
  [ngClass]="{'file-is-over': fileIsOver}"
  [ERROR ->][options]="options"
  (fileOver)="fileIsOver = $event"
  (onFileDrop)="file=$event; uploadfile()">
"):

I get additional errors in chrome related to [options] not being a member of <div>... Trying ng2-file-drop now.

I am using:

@angular/cli: 1.0.0-beta.30
os: darwin x64
@angular/***: 2.3.1

[aclowkey]

Any workaround guys?

[subatomicglue]

Yes... sort of... I am using no ng2 or angular2 npm packages for file drag/drop now. And I love it.
Standard HTML5 Here's how to implement your own - it's very easy.

Template:

<!-- OPTIONAL:  top level, fullpage box, used to ignore any drag/drop events which might make your browser do something stupid like load a pdf - nice for SinglePageApps... -->
<div (dragover)="preventDefaultAndStopPropagation($event)" (dragleave)="preventDefaultAndStopPropagation($event)" (drop)="preventDefaultAndStopPropagation($event)">

  <!-- your drag/drop box within the page -->
  <div (dragleave)="onDragFileOverEnd($event)" (drop)="onDragFileDrop($event)" 
 (dragover)="onDragFileOverStart($event)">
      <!-- stuff goes here, or you can use ng-content to embed other components -->
      <ng-content></ng-content>
  </div>

</div>

Class

  @Output() public dragFileAccepted: EventEmitter<Object> = new EventEmitter();
  public isHovering: boolean = false;

  private onDragFileOverStart(event) {
    if (!this.isHovering) {
      this.isHovering = true;
    }
    this.preventDefaultAndStopPropagation(event);
    return false;
  };

  private onDragFileOverEnd(event): any {
    this.preventDefaultAndStopPropagation(event);
    return false;
  }

  private onDragFileAccepted(acceptedFile: File): any {
      if (this.dragFileAccepted) {
        this.dragFileAccepted.emit({ file: acceptedFile });
      }
  }

  private onDragFileDrop(event: any): any {
    this.preventDefaultAndStopPropagation(event);
    this.FileSelectHandler(event);
  }

  private preventDefaultAndStopPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  // file selection handler (can be called from drag, or from a file-requestor select box)
  public FileSelectHandler(e) {
    this.isHovering = false;      // cancel the hover
    var files = e.target.files || e.dataTransfer.files;     // fetch FileList object

    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
      this.onDragFileAccepted(f);
    }
  }

How To Use the above new component:

<my-filedrop (dragFileAccepted)="uploadfile( $event.file )">
  <div class="test">
    DRAG Y0 FILES HERE
  </div>
</my-filedrop>

[justmatt25]

@subatomicglue thanks so much for the code! It worked well for me and was a big help! I am still pretty new at this Angular 2 thing so if you could give me some pointers on transferring the file to the backend so I can store it in on my server that would be great!

[subatomicglue]

Well, I assume you're doing npm start to run your server local and your angular2 app works. And that you're asking how to host your angular2 files on a server? There's many ways to do that. And it depends on what you're using to host those files. Amazon AWS EC2 instances, digital ocean servers, you could store in an Amazon AWS S3 bucket as well. Microsoft azure or google cloud are others. Many other options as well, including your own computer running in your home if you really wanted too. But those computers run Linux or windows generally and run web servers like nginix or apache. Getting your files there involves using e.g. ssh or scp on the command line in bash shell to the right directory on the server (sometimes is /var/www in Ubuntu running nginix for example). Sometimes you use a web interface to drop files on the server depending on your host service.

For doing backend data services, like if you needed a database to store user info, there are other software packages you can use as well, such as nodejs, that you would have to develop and copy up to the server similar as above. There are also hosted databases you can use like firebase or amazon rds (which gives you several options such as MySQL, dynamoDB), some other services offer Mongo as well.

Good luck. If my answer was all over the place it's because your question was a little open ended. ;-). There are many backends, and many ways to store your file(s) there. Typically this github isn't the place to discuss this general topic, and some google searches would be a better starting point for you, or stackoverflow when you get stuck.

On Fri, May 19, 2017 at 8:28 AM Justin Morrison notifications@github.com wrote:

@subatomicglue https://github.com/subatomicglue thanks so much for the code! It worked well for me and was a big help! I am still pretty new at this Angular 2 thing so if you could give me some pointers on transferring the file to the backend so I can store it in on my server that would be great!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jellyjs/angular2-file-drop/issues/19#issuecomment-302702720, or mute the thread https://github.com/notifications/unsubscribe-auth/AHTlNXXUZP5Grf1G5PRVMmhnP7_fbFw8ks5r7ZkCgaJpZM4MD_5u .

-- Sent from Gmail Mobile

[ckruhs]

@subatomicglue your code is great! Can you give me a hint how to access the file content?

Thanks