Angular 2 drag and drop upload

Question

I'm trying to implement a drag and drop upload for angular 2 that is similar to this: http://bootsnipp.com/snippets/featured/bootstrap-drag-and-drop-upload

Since I'm using angular 2 I want to use typescript rather than jquery. I found a library called ng2-file-upload and I tried to implement the drag and drop functionality; however, I can't seem to get it to work. This is what I have:

Upload.component.ts

Component({
  selector: 'upload',  
  templateUrl: 'app/components/upload/upload.component.html',
  styleUrls: ['app/components/upload/upload.component.css'],
providers: [ UploadService ]
})
export class UploadComponent {

public uploader:FileUploader = new FileUploader({url: URL});
    public hasBaseDropZoneOver:boolean = false;
    public hasAnotherDropZoneOver:boolean = false;

    public fileOverBase(e:any):void {
        this.hasBaseDropZoneOver = e;
    }

    public fileOverAnother(e:any):void {
        this.hasAnotherDropZoneOver = e;
    }
}

upload.component.html

<section id="dropzone">
    <div class="panel panel-default">

        <div class="panel-body">

            <!-- Standar Form -->
            <h4>Select files from your computer</h4>
            <br>
            <form  enctype="multipart/form-data" id="js-upload-form">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="file" name="files[]" multiple (change)="fileChangeEvent($event)">
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary"  (click)="upload()">Upload files</button>
                </div>
            </form>
</div>
    </div>



            <!-- Drop Zone -->
            <h4>Or drag and drop files below</h4>
        <br>
            <!--<div class="upload-drop-zone" id="drop-zone">-->
                <!--Just drag and drop files here-->
            <!--</div>-->
        <div ng2FileDrop
             [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             class="well upload-drop-zone">
            Drop Files Here
        </div>
    </section>

upload.component.css

.upload-drop-zone {
    color: #ccc;
    border-style: dashed;
    border-color: #ccc;
    line-height: 200px;
    text-align: center
}
.another-file-over-class {
    border: dashed 3px green;
}

Solution

I think you are missing to bind uploader in html.

<div ng2FileDrop
     [ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
     (fileOver)="fileOverBase($event)"
     [uploader]="uploader"
     class="well upload-drop-zone">
     Drop Files Here
</div>

Comments

[roshini]

is it working? if it is working can u create plunker for this?