Cannot distinguish between event handlers when doing drag-n-drop

[alexandis]

Hi,
I am back :)
I've used the following markup to cover both drag-n-drop and usual selection for multiple file upload:

<ngx-mat-dropzone (drop)="onDropDocuments($event)">
    <input type="file" fileInput [ngModel]="files" [ngModelOptions]="{ standalone: true }" [multiple]="true"(ngModelChange)="onSelectDocuments($event)" />
</ngx-mat-dropzone>

Unfortunately, it works well only for an ordinary select, because only onSelectDocuments is triggered. When I use drag-n-drop, both onSelectDocuments and onDropDocuments handlers are triggered and as a result, I get the issue, because the code has to process the same logic twice. How to avoid this and clearly divide the handlers?

I used some custom logic, that's why I use onDropDocuments handler. And also I found using ngModel in my case instead of formControl to be preferrable.

In fact, the main reason for having the custom code was to get the initial source path of the file by all means, since we needed to pass this info to server. If I could obtain this information in other way, probably I would get rid of the issue as well by eliminating some custom handlers...

[hackingharold]

Hi @alexandis,

I want to confirm I understand your problem correctly.
You want to access the files source paths before upload. I assume you want to use the webkitRelativePath property.
What exactly are you checking in both your handlers, onDropDocuments and onSelectDocuments?

[alexandis]

Hi.

I use my custom logic in onDropDocuments method to handle a drag-n-drop scenario. This logic creates the collection of files to-be-uploaded, preserving the original file path using FileSystemEntry => fullPath property (otherwise the original file name does not contain this information). Here, I have to copy the original file to a new file to change its name, because File is immutable (this.files.push(this.copyFile(file, fileEntry.fullPath.replace(/^\/[A-Z]_drive/, '')));)

And I use onSelectDocuments to handle an ordinary logic - selecting files folder with standard system "Open" button - in this case the original file path is available straight in File => name. In general, I use onSelectDocuments to build a common logic of displaying the files to-be-uploaded (the folder structure with the total amount of files and its volume per each subfolder), no matter if it's a drag-n-drop or a system select.

And I am getting issues related to the fact that for drag-n-drop both methods are called. So I would appreciate your proposals how to simplify my logic to still achieve the goal.

The team member broke the page availability and I cannot test my page right away. Are you implying that I can use webkitRelativePath next to webkitdirectory and it will resolve my issue and besides I will be able to through away some of my code?

[hackingharold]

Please have a look at PR #80. This might fix your problem.

I first decided to ignore the relative path info, but I thinks it's time to add it back in.
The only way to achieve a consistent behavior is to add a new property.

Please review the PR code. You might want to checkout the branch and try it locally.
If this fits your needs, we may release a new version.

[alexandis]

Thank you. I will check and let you know.
Another small question: if i am going to make the list of file replenishable (i.e. i can delete the selected files from the list, make selection again from other location merging with the previous selection, i.e. I am going to store the list of all files internally) - then what is the best way of using this component in terms of memory efficiency? <input type="file" fileInput (change)="onSelectDocuments($event)" [multiple]="true" />, so no model or control to store the selection or I still have to use formControl / ngModel and the relevant events?

UPDATE: I've cloned your repo and took PR branch, but I am not sure what to do next. We use Angular v15.2 in all the projects, you use version 18, so I don't know where my attempts will get me after all... :) Maybe I should have used another approach - just patch the existing code, not trying to install a patched version of the component?

[hackingharold]

After cloning the repo and npm install follow these steps to run a test app.
Then upload some files and check if the relativePath property is set. You should be able to keep the file paths on drop AND when using the file picker.
Migrating to Angular 18 is recommended anyway, as a workaround you could install the latest version with --force flag in your project.

About your other question, the internal state is stored in the value property.
I would recommend to use a FormControl for the most flexible state management.
Use the property mode (see config) to change the behavior. By default, a second file selection will overwrite the first one. But you may also "stack" all selected files.

[alexandis]

Hi Paul.
Thank you, I've installed PR version to my project.
Seems like it does not work fully correct or I am missing something.
Here is my usage (for "folder selection" scenario):

  <ngx-mat-dropzone>
    <input type="file" fileInput [(ngModel)]="files" [ngModelOptions]="{ standalone: true }" [multiple]="true" relativePath mode="append" webkitdirectory (ngModelChange)="buildFolderOutput()" />
  </ngx-mat-dropzone>

When I select the folder in a system way, via button click - everything looks as expected: webkitRelativePath property is filled with the correct subfolder path.
However, when I drag-n-drop it - webkitRelativePath property of its files is empty.

Another issue: I have the button to remove the selected files, which does this: this.files = []; However, when I select the files again, it pulls the previously selected files from somewhere and merges them with the ones currently selected...

And probably the last question here: how to avoid adding duplicates? It might look like a user responsibility, but maybe the component should offer some fool-proof mechanisms?

[hackingharold]

Hey, thanks for the feedback.
You're almost there. On drop, the webkitRelativePath property will be empty, since I can't overwrite it with the full path value because it's readonly. Therefore, I added the new relativePath property which should have the expected value.

As for your other bug of clearing the array, I will have to look into this in the next few days. Maybe use a FormControl as a workaround?

When using mode="replace" (which is the default) on the <input type="file"> element, no duplicates should be possible because the files array will be reset on each change. Any other validation will be left to you as the consumer. You might check for duplicate file names in the FormControl valueChanges handler.

[alexandis]

Maybe I am missing something obvious, but on drag-n-drop console.log((file as any).relativePath) returns me undefined inside buildFolderOutput ngModelChange handler when I loop through files array... Probably it was taken care only for formControl scenario? I think it should be consistent for both scenarios, because someone will always prefer one over another.

Maybe use a FormControl as a workaround

I might check it out later on, but if it was possible to make it work for ngModel, I would be happy ;)

[hackingharold]

Okay, so let's try to figure this out.
Please setup the local playground dev app as described in my previous post. With this minimum example I got it working as expected.

import { Component } from '@angular/core';
import { File } from '@ngx-dropzone/cdk';

@Component({
  selector: 'app-root',
  template: `<div class="app-container">
    <mat-form-field appearance="fill">
      <mat-label>Drop anything!</mat-label>
      <ngx-mat-dropzone>
        <input
          type="file"
          fileInput
          multiple
          webkitdirectory
          [(ngModel)]="files"
          [ngModelOptions]="{ standalone: true }"
          (ngModelChange)="buildFolderOutput()"
        />
      </ngx-mat-dropzone>
    </mat-form-field>
  </div>`,
})
export class AppComponent {
  files: File[] = [];

  buildFolderOutput() {
    this.files.forEach((f) => console.log(f.relativePath));
  }
}

[hackingharold]

To be able to reset the internal value, even with mode="append", I expanded the PR to add a new clear() method to the directive. Use it like so.

<input type="file" fileInput #fi="fileInput" mode="append" />

<button (click)="fi.clear()">Reset</button>

[alexandis]

Thank you, i will try this on Monday. Quick question: is it possible to delete a single item from files array? I should have asked that in the first place, not deleting all the elements, sorry.