I'm currently working on incorporating a drag and drop upload feature for angular 2, similar to the one found at:
Given that I am using angular 2, my preference is to utilize typescript as opposed to jquery. After some research, I came across a library called ng2-file-upload and attempted to integrate the drag and drop functionality. However, I have encountered difficulties in making it function properly. Here is what I have so far:
Modified Upload.component.ts File:
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;
}
}
Adjusted upload.component.html Content:
<section id="dropzone">
<div class="panel panel-default">
<div class="panel-body">
<!-- Standard 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 ng2FileDrop
[ngClass]="{'another-file-over-class': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
class="well upload-drop-zone">
Drop Files Here
</div>
</section>
Adjusted upload.component.css Styling:
.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;
}