Please check the code HTML file
<div class='multiple'><span *ngFor="let filename of fileList" class="fileLoaded">{{filename}}<dew-icon [options]="{icon:'cross'}" (click)="deleteItem(filename)" class="file-close"></dew-icon>
</span>
</div>
<label for="file-upload-{{Id}}" class="custom-file-upload">
<span><dew-icon class='sizeIcon' [options]="{icon:'lnr lnr-move'}"></dew-icon></span>
<i class="fa fa-cloud-upload"></i> Drag and Drop /Browse
</label>
<input accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,text/plain,image/jpeg,image/gif,image/png,image/tiff,image/vnd.dwg,application/zip,application/x-rar-compressed,application/step,application/iges" id="file-upload-{{Id}}" multiple (change)="onChange($event)" sm="25" type="file" />
Please check the code ts file
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'dew-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.less']
})
export class FileUploadComponent implements OnInit {
@Input() Id: String;
public fileList = [];
constructor() {
}
@Output() fileObject = new EventEmitter();
ngOnInit() {
}
onChange(event: any) {
let files = [].slice.call(event.target.files);
// input.value = files.map(f => f.name).join(', ');
let multFile = files.map(f => f.name);
for (let entry of multFile) {
var found = false;
for (let existFile of this.fileList) {
console.log(entry.indexOf(existFile));
if (entry.indexOf(existFile) != -1) {
found = true;
}
}
if (found == false) {
this.fileList.push(entry);
}
}
this.fileObject.emit(files);
}
deleteItem(obj) {
for (let i = 0; i < this.fileList.length; i++) {
if (obj == this.fileList[i]) {
this.fileList.splice(i, 1);
break;
}
}
}
}
Please let me know how to implement the drag and drop functionality together with the file upload.
