I'm in the process of porting our angular 1.3 application to angular 9. One
of the features we allow users to do is either select a set of files using
a file chooser, or drag & drop a set of files in an area for processing.
This needs to carry forward, and after watching the angular cdk tutorial
here youtube cdk <https://www.youtube.com/watch?v=t1CrWLGxQPk> I was able
to get this "somewhat" working. By this I mean, the file chooser option
works wonderfully. The drag & drop option, works like my son - not very
reliant! Occasionally, I can get the files to drop in the file input area,
however, most times, they end up opening tabs on my browser. Below is the
code from the html portion of the page:
<div class="card text-left">
<div class="card-header badge-primary">
<h5 class="card-title">Add Data Files</h5>
</div>
<div class="card-body">
<div cdkDropList (cdkDropListDropped)="dropDataFiles($event)">
<div cdkDrag class="list-group drop-box">
<div class="list-group-item drop-box h-100">
<input type="file" class="form-control overlay-input h100"
(change)="addDataFiles($event)" value="dataFiles" multiple>
<input type="text" class="form-control drop-zone h100
text-center" value="Click/Drag & Drop Files Here"
readonly>
</div>
<div class="scrollable vh-25">
<p class="list-group-item text-center"
[hidden]="hasDataFiles"><i>No Files Selected</i></p>
<a class="list-group-item" *ngFor="let afile of dataFiles;
let i = index" [hidden]="!hasDataFiles">
{{afile.name}}
<span (click)="removeDataFile(i)" class="badge clickable">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And, here is a snippet from my component class...
addDataFiles($event) {
if ($event.target.files.length > 0) {
for (let index = 0; index < $event.target.files.length; index++) {
this.dataFiles.push($event.target.files[index]);
console.log('added data file: ' + this.dataFiles[index].name);
}
}
this.updateDisplay();
console.log('completed adding ' + $event.target.files.length + ' files
to datafiles array');
}
dropDataFiles($event: CdkDragDrop<File[]>) {
console.log('have cdk drag/drop event!');
console.log($event);
// addDataFiles($event); //i've tried commenting and uncommenting this
line, but never see the above 2 lines in console log area.
}
So, after watching the video, i have a couple questions. First, in the
video, in the cdkDropList area, he attaches an event listener which moves
the stuff around in the array. and you can see it going in his method.
however, in my component class, i have two files for events -
dropDataFiles($event) and addDataFiles($event) when am able to drop & drag,
I don't see the console log note being print in the dropDataFiles()
method... it seems to only pick up the addDataFiles() listener. Am I
missing something? I'm fairly new to angular, so that's a close given.
Appreciate any help someone can provide!
Thanks,
JG
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/1d585d0b-09af-4b4f-88d6-f2033f3c1105%40googlegroups.com.
