feat: allow dropping a folder into the dropzone

ember-file-upload/src/components/file-dropzone.ts

@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
-import DataTransferWrapper from '../system/data-transfer-wrapper.ts';
+import DataTransferWrapper, {
+ type FileWithDirectory,
+} from '../system/data-transfer-wrapper.ts';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { UploadFile } from '../upload-file.ts';
@@ -134,7 +136,7 @@ export default class FileDropzoneComponent extends Component<FileDropzoneSignatu
  }
 
  @action
- didDrop(event: FileUploadDragEvent) {
+ async didDrop(event: FileUploadDragEvent) {
  if (this.dataTransferWrapper) {
  this.dataTransferWrapper.dataTransfer = event.dataTransfer;
  }
@@ -219,22 +221,33 @@ export default class FileDropzoneComponent extends Component<FileDropzoneSignatu
  // }
 
  if (this.dataTransferWrapper) {
- const addedFiles = this.addFiles(this.files);
- this.args.onDrop?.(addedFiles, this.dataTransferWrapper);
+ const files: FileWithDirectory[] = this.args.allowFolderDrop
+ ? await this.dataTransferWrapper.getFilesAndDirectories()
+ : this.files.map((file) => ({ file }));
 
+ const addedFiles = this.addFiles(files);
+ this.args.onDrop?.(addedFiles, this.dataTransferWrapper);
  this.active = false;
  this.dataTransferWrapper = undefined;
  }
  }
 
- addFiles(files: File[]) {
+ addFiles(files: FileWithDirectory[]) {
  const addedFiles = [];
  for (const file of files) {
- if (file instanceof File) {
- const uploadFile = new UploadFile(file, FileSource.DragAndDrop);
+ if (file.file instanceof File) {
+ const uploadFile = new UploadFile(
+ file.file,
+ FileSource.DragAndDrop,
+ file.folderName,
+ );
  if (
  this.args.filter &&
- !this.args.filter(file, files, files.indexOf(file))
+ !this.args.filter(
+ file.file,
+ files.map((f) => f.file),
+ files.indexOf(file),
+ )
  ) {
  continue;
  }

ember-file-upload/src/interfaces.ts

@@ -119,6 +119,14 @@ export interface FileDropzoneSignature {
  * */
  allowUploadsFromWebsites?: boolean;
 
+ /**
+ *
+ * Whether users can drop folders into the dropzone
+ *
+ * @defaulValue false
+ * */
+ allowFolderDrop?: boolean;
+
  /**
  * This is the type of cursor that should
  * be shown when a drag event happens.

ember-file-upload/src/system/data-transfer-wrapper.ts

@@ -1,7 +1,96 @@
 import type { FileUploadDragEvent } from '../interfaces.ts';
 
+interface FutureProofDataTransferItem extends DataTransferItem {
+ getAsEntry?: () => FileSystemDirectoryEntry | null;
+}
+
+export interface FileWithDirectory {
+ file: File;
+ folderName?: string;
+}
+
 const getDataSupport = {};
 
+// this will read a filesystementry into a File object, but ignore the entry if it is a directory
+const readEntry = (entry: FileSystemEntry): Promise<File | void> => {
+ return new Promise((resolve) => {
+ if (entry.isFile) {
+ (entry as FileSystemFileEntry).file((fileEntry: File) => {
+ resolve(fileEntry);
+ });
+ } else {
+ console.warn(
+ `The dropped directory contains a subdirectory ${entry.fullPath}, the contents of this will be skipped.`,
+ );
+ resolve();
+ }
+ });
+};
+
+const getEntry = (
+ item: FutureProofDataTransferItem,
+): FileSystemDirectoryEntry => {
+ // In the future this method name might change, so already implementing it like this if needed
+ // https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry
+ return (
+ item.getAsEntry?.() ?? (item.webkitGetAsEntry() as FileSystemDirectoryEntry)
+ );
+};
+
+// this will read all the files directly in the given directory, but ignore any nested directory entries and the files therein.
+const readAllFilesInDirectory = (item: DataTransferItem): Promise<File[]> =>
+ new Promise((resolve, reject) => {
+ const entry = getEntry(item);
+ if (!entry) {
+ reject('Could not read directory');
+ }
+
+ const reader = entry?.createReader();
+ if (!reader) {
+ reject('Could not read directory');
+ }
+ const entries: FileSystemEntry[] = [];
+ const read = () =>
+ new Promise<void>((resolve, reject) => {
+ const readChunk = () => {
+ reader.readEntries((newEntries: FileSystemEntry[]) => {
+ if (newEntries.length > 0) {
+ entries.push(...newEntries);
+ readChunk();
+ } else {
+ resolve();
+ }
+ }, reject);
+ };
+ readChunk();
+ });
+
+ read().then(async () => {
+ const readFiles: (File | void)[] = await Promise.all(
+ entries.map(readEntry),
+ ).catch((err) => {
+ console.error(err);
+ throw err;
+ });
+ resolve(readFiles.filter(Boolean) as File[]);
+ });
+ });
+
+const readDataTransferItem = async (
+ item: DataTransferItem,
+): Promise<FileWithDirectory[]> => {
+ const entry = getEntry(item);
+ if (entry?.isDirectory) {
+ return (await readAllFilesInDirectory(item)).map((file) => ({
+ file,
+ folderName: entry?.name,
+ }));
+ } else {
+ const fileItem = item.getAsFile() as File;
+ return [{ file: fileItem }];
+ }
+};
+
 export default class DataTransferWrapper {
  dataTransfer?: DataTransfer;
  itemDetails?: FileUploadDragEvent['itemDetails'];
@@ -43,6 +132,25 @@ export default class DataTransferWrapper {
  return this.files.length ? this.files : this.items;
  }
 
+ async getFilesAndDirectories(): Promise<FileWithDirectory[]> {
+ if (this.dataTransfer?.items) {
+ const allFilesInDataTransferItems: FileWithDirectory[][] =
+ await Promise.all(
+ Array.from(this.dataTransfer?.items).map(readDataTransferItem),
+ );
+
+ const flattenedFileArray: FileWithDirectory[] =
+ allFilesInDataTransferItems.reduce((flattenedList, fileList) => {
+ return [...flattenedList, ...fileList];
+ }, []);
+
+ return flattenedFileArray;
+ } else {
+ const droppedFiles: File[] = Array.from(this.dataTransfer?.files ?? []);
+ return droppedFiles.map((file) => ({ file }));
+ }
+ }
+
  get files() {
  return Array.from(this.dataTransfer?.files ?? []);
  }

ember-file-upload/src/test-support.ts

@@ -91,6 +91,72 @@ export async function dragAndDrop(
  return triggerEvent(dropzone, 'drop', { dataTransfer });
 }
 
+interface FileSystemEntryStub {
+ isFile: boolean;
+ file: (callback: (file: File | Blob) => void) => void;
+}
+
+export async function dragAndDropDirectory(
+ target: string | HTMLElement,
+ folderName: string,
+ filesInDirectory: (File | Blob)[],
+ singleFiles?: (File | Blob)[],
+) {
+ const dropzone = target instanceof HTMLElement ? target : find(target);
+ assert(`Selector '${dropzone}' could not be found.`, dropzone);
+ assert(
+ 'filesInDirectory must be an array',
+ filesInDirectory instanceof Array,
+ );
+ assert(
+ 'All files in directory must be instances of File/Blob type',
+ filesInDirectory.every((file) => file instanceof Blob),
+ );
+ if (singleFiles) {
+ assert('singleFiles must be an array', singleFiles instanceof Array);
+ assert(
+ 'All added singleFiles must be instances of File/Blob type',
+ singleFiles.every((file) => file instanceof Blob),
+ );
+ }
+
+ const folderItem = {
+ webkitGetAsEntry: () => ({
+ isDirectory: true,
+ name: folderName,
+ createReader: () => ({
+ readEntries: (callback: (entries: FileSystemEntryStub[]) => void) => {
+ const readingFiles = filesInDirectory.splice(0, 2);
+ const entryFiles = readingFiles.map((file) => {
+ return {
+ isFile: true,
+ file: (callback: (file: File | Blob) => void) => {
+ callback(file);
+ },
+ };
+ });
+ callback(entryFiles);
+ },
+ }),
+ }),
+ };
+
+ const singleFileItem = (singleFile: File | Blob) => ({
+ webkitGetAsEntry: () => ({
+ isDirectory: false,
+ }),
+ getAsFile: () => singleFile,
+ });
+
+ const dataTransfer = {
+ items: [folderItem, ...(singleFiles || []).map(singleFileItem)],
+ };
+
+ await triggerEvent(dropzone, 'dragenter', { dataTransfer });
+ await triggerEvent(dropzone, 'dragover', { dataTransfer });
+ return triggerEvent(dropzone, 'drop', { dataTransfer });
+}
+
 /**
  Triggers a `dragenter` event on a `FileDropzone` with `files`.
 

ember-file-upload/src/upload-file.ts

@@ -17,12 +17,14 @@ import { estimatedRate } from './system/rate.ts';
 export class UploadFile {
  file: File;
  #source: FileSource;
+ folderName?: string;
 
  queue?: Queue;
 
- constructor(file: File, source: FileSource) {
+ constructor(file: File, source: FileSource, folderName?: string) {
  this.file = file;
  this.#source = source;
+ this.folderName = folderName;
  }
 
  /**