0

I'm tasked with making an multi-image uploader in an old Angular 7 that uses ng-file-upload. It has a single image uploader that works fine, and my new multi-image uploader (using the same implementation) works fine too, except...

If I drag and drop images, when logging $event in the fileDropped() method, I get a File object, but if I click and select a file, I get an event object with no File. E.g.:

isTrusted: true
bubbles: true
cancelBubble: false
...

I'm pretty sure this is a simple implementation issue but I'm not sure where to debug. TI'm hoping that someone has just encountered this before and knows off the top of their head what it is.

// in template
<div ng2FileDrop class="file-drop-sm" 
  [uploader]="fileUploader"
  [ngClass]="{'hover': hasAnotherDropZoneOver}"
  (onFileDrop)="fileDropped($event)" 
  (fileOver)="fileOver($event)"
>
...
<input id="bulkUploader" 
  value="null" type="file" ng2FileSelect [uploader]="fileUploader"
  accept="{{allowedFileTypes}}"
  (change)="fileDropped($event);" 
  style="display:none"
  [multiple]="isMultiple" 
/>

// in component

public async fileDropped($event) {
  console.log($event); // drag/drop returns File, but selecting returns event object.
...
}

TL;DR - dnd works, clicking to select returns event object with no File.

Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
  • > There are too many moving parts to post code.... So post a little example to reproduce the failure – Flo Feb 19 '23 at 21:31
  • @Flo updated op. – Kirk Ross Feb 19 '23 at 22:13
  • And the code behind? Can I see it, too? Here is an example in Stackblitz: https://stackblitz.com/edit/ng2-file-upload?file=app/app.component.ts – Flo Feb 20 '23 at 06:50
  • @Flo That was it! I was using `(change)="..."` on my input and needed to use the specific method `(onFileSelect)="..."` If you want to post that as an answer I'll give it a green check. – Kirk Ross Feb 20 '23 at 23:45

1 Answers1

1

A small typo. Change the change method to onFileSelect and it will work!

<input id="bulkUploader" 
  value="null" type="file" ng2FileSelect [uploader]="fileUploader"
  accept="{{allowedFileTypes}}"
  (onFileSelect)="fileDropped($event);" 
  style="display:none"
  [multiple]="isMultiple" 
/>
Flo
  • 2,232
  • 2
  • 11
  • 18