Skip to content

Missing file when dragged from browser #293

Open
@Res42

Description

@Res42

The file is missing when I drag a file from the browser, for example an image is dragged and dropped from a google image search result page to the dropzone.

Maybe related issue:

Versions:

  • ngx-file-drop: 16.0.0
  • angular: 16.1.3
  • chrome: 115.0.5790.171

I debugged the issue and this is what I found.

private checkFile(item: DataTransferItem | File): void {
if (!item) {
return;
}
// if ("getAsFile" in item) {
// const file = item.getAsFile();
// if (file) {
// this.addToQueue(
// this.getFakeDropEntry(file)
// );
// return;
// }
// }
if ("webkitGetAsEntry" in item) {
let entry = item.webkitGetAsEntry();
if (entry) {
if (entry.isFile) {
const toUpload: NgxFileDropEntry = new NgxFileDropEntry(entry.name, entry);
this.addToQueue(toUpload);
} else if (entry.isDirectory) {
this.traverseFileTree(entry, entry.name);
}
return;
}
}
this.addToQueue(this.getFakeDropEntry((item as File)));
}

checkFile is called, but item.webkitGetAsEntry() returns null, so it uses the fallback to pass the DataTransferItem raw.

image

The (onFileDrop) output emits this DataTransferItem but it is empty (if it was not empty then I could have made a workaround for this bug).

image

There was a pull request to use getAsFile which seems to work for my use case #263, but it was reverted adcb504 (#268).

I'd be happy to create a pull request to fix this issue: use getAsFile but code it so it does not break folder uploads, maybe running it only when item.webkitGetAsEntry() == null would sidestep the problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions