ngx-file-drop - `openFileSelector()` does not seem to produce a usable File object

Question

I'm trying to get file uploads to work using the ngx-file-drop module.

This is what I have so far:

<ngx-file-drop (onFileDrop)="dropped($event)" [showBrowseBtn]="true">
    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
        <div (click)="openFileSelector()" class="file-drop-content">
            <h2>Drag File Here</h2>
            <span>or click to browse</span>
        </div>
    </ng-template>
</ngx-file-drop>

It currently works fine for files that are dragged/dropped, but not for "click to browse" files. It'll allow me to browse for & select a file, but the FileEntry object that it sends back is missing the filesystem & fullPath properties:

which are present in the drag/drop version:

making the click-to-browse version unusable (afaict).

I imagine I'm missing some config somewhere. I'm not super familiar with this module, as I'm just taking over the project from someone else.

Anyone have any ideas what would cause the drag/drop file to be different from the click-to-browse file?

Answer 1

I found that the lack of filesystem/filePath properties doesn't matter.

What does matter is that, in the "click to browse" scenario, ctx-file-drop.js creates a "fake" FileEntry object where the file() method simply calls a callback. So it fires immediately. Whereas, in the drag/drop case, a regular FileEntry object is created. The file() method, there, does NOT fire immediately.

In my case, this was causing problems because, further down the processing chain, I had:

public readFile(fileEntry: FileSystemFileEntry): Observable<File> {

    const subject: Subject<File> = new Subject<File>();

    fileEntry.file((f: File) => {
        subject.next(f);
        subject.complete();
    });

    return subject.asObservable();
}

The fake FileEntry.file() was firing before anything could subscribe to the Observable. I resolved it by changing the Subject to a new ReplaySubject(1).