upload(files),
- })}
+ ref={dz}
style={{
background: dz.isDragging() ? "lightblue" : "lightgray",
padding: "2rem",
@@ -346,6 +342,10 @@ type FileUploadEntry = {
type UserCallback = (files: UploadFile[]) => void | Promise
;
+// Drag-movement callbacks (onDragEnter/onDragLeave/onDragOver) receive the raw
+// DragEvent instead of UploadFile[] — dataTransfer.files is only populated at drop.
+type DragEventCallback = (event: DragEvent) => void | Promise;
+
type FilePickerOptions = {
accept?: string;
multiple?: boolean;
diff --git a/packages/upload/package.json b/packages/upload/package.json
index 271a590f0..ab62ab195 100644
--- a/packages/upload/package.json
+++ b/packages/upload/package.json
@@ -14,11 +14,11 @@
"stage": 3,
"list": [
"createFilePicker",
+ "createDropzone",
+ "dropzone",
"createFileUploader",
"fileSender",
- "fileUploader",
- "createDropzone",
- "dropzone"
+ "fileUploader"
],
"category": "Browser APIs",
"gzip": 2321
@@ -58,7 +58,7 @@
"test:ssr": "pnpm run vitest --mode ssr"
},
"dependencies": {
- "@solid-primitives/event-listener": "workspace:*"
+ "@solid-primitives/drag-drop": "workspace:*"
},
"peerDependencies": {
"@solidjs/web": "catalog:peer",
diff --git a/packages/upload/src/createDropzone.ts b/packages/upload/src/createDropzone.ts
index c287ad022..097ec9152 100644
--- a/packages/upload/src/createDropzone.ts
+++ b/packages/upload/src/createDropzone.ts
@@ -1,30 +1,29 @@
-import { createSignal, flush } from "solid-js";
+import { createSignal } from "solid-js";
import { isServer } from "@solidjs/web";
-import { createEventListenerMap } from "@solid-primitives/event-listener";
+import { createNativeDroppable } from "@solid-primitives/drag-drop";
import { transformFiles } from "./helpers.ts";
import type { UploadFile, Dropzone, DropzoneOptions } from "./types.ts";
/**
- * Primitive to make working with dropzones easier.
+ * Reactive drop zone for receiving files dragged from the OS or browser.
+ * Composes `createNativeDroppable` from `@solid-primitives/drag-drop` for the
+ * drag-state tracking and attaches file-specific state (`files`, `isLoading`,
+ * `error`, `removeFile`, `clearFiles`) on top.
*
- * @returns `ref`
- * @returns `files`
- * @returns `error` - Reactive error from the last drag callback, cleared on next drop
- * @returns `isLoading` - True while the `onDrop` callback is pending
- * @returns `isDragging`
- * @returns `removeFile`
- * @returns `clearFiles`
+ * @returns `ref` — attach to any element via `ref={ref}`
+ * @returns `files` — dropped files as `UploadFile[]`
+ * @returns `isDragging` — true while a drag is over the zone
+ * @returns `isLoading` — true while the async `onDrop` callback is pending
+ * @returns `error` — error thrown by the last `onDrop` callback
+ * @returns `removeFile` — remove a single file by name
+ * @returns `clearFiles` — clear all files
*
* @example
- * ```ts
- * const { ref: dropzoneRef, files: droppedFiles, error } = createDropzone({
- * onDrop: async files => {
- * await doStuff(2);
- * files.forEach(f => console.log(f));
- * },
- * onDragStart: files => files.forEach(f => console.log(f)),
- * onDragOver: files => console.log("drag over")
+ * ```tsx
+ * const { ref, files, isDragging } = createDropzone({
+ * onDrop: async files => { await upload(files); },
* });
+ * Drop files here
* ```
*/
function createDropzone(
@@ -41,98 +40,46 @@ function createDropzone(
clearFiles: () => {},
};
}
+
const [files, setFiles] = createSignal([]);
const [error, setError] = createSignal(null);
const [isLoading, setIsLoading] = createSignal(false);
- const [isDragging, setIsDragging] = createSignal(false);
-
- const runCallback = async (
- callback: ((files: UploadFile[]) => void | Promise) | undefined,
- parsedFiles: UploadFile[],
- ) => {
- try {
- await callback?.(parsedFiles);
- } catch (err) {
- setError(err);
- }
- };
-
- const onDragStart = (event: DragEvent) => {
- void runCallback(options?.onDragStart, transformFiles(event.dataTransfer?.files || null));
- };
- const onDragEnd = (event: DragEvent) => {
- void runCallback(options?.onDragEnd, transformFiles(event.dataTransfer?.files || null));
- };
- const onDragEnter = (event: DragEvent) => {
- setIsDragging(true);
- void runCallback(options?.onDragEnter, transformFiles(event.dataTransfer?.files || null));
- };
- const onDragLeave = (event: DragEvent) => {
- setIsDragging(false);
- void runCallback(options?.onDragLeave, transformFiles(event.dataTransfer?.files || null));
- };
- const onDragOver = (event: DragEvent) => {
- event.preventDefault();
- void runCallback(options?.onDragOver, transformFiles(event.dataTransfer?.files || null));
- };
- const onDrag = (event: DragEvent) => {
- void runCallback(options?.onDrag, transformFiles(event.dataTransfer?.files || null));
- };
- const onDrop = (event: DragEvent) => {
- event.preventDefault();
- setIsDragging(false);
- const parsedFiles = transformFiles(event.dataTransfer?.files || null);
- setFiles(parsedFiles);
- setError(null);
- setIsLoading(true);
- void (async () => {
- try {
- await options?.onDrop?.(parsedFiles);
- } catch (err) {
- setError(err);
- } finally {
- setIsLoading(false);
- }
- })();
- };
- const [refTarget, setRefTarget] = createSignal(undefined);
-
- createEventListenerMap(refTarget as () => T, {
- dragstart: onDragStart,
- dragenter: onDragEnter,
- dragend: onDragEnd,
- dragleave: onDragLeave,
- dragover: onDragOver,
- drag: onDrag,
- drop: onDrop,
+ const drop = createNativeDroppable({
+ onEnter: e => options?.onDragEnter?.(e),
+ onLeave: e => options?.onDragLeave?.(e),
+ onOver: e => options?.onDragOver?.(e),
+ onDrop: e => {
+ const parsedFiles = transformFiles(e.dataTransfer?.files ?? null);
+ setFiles(parsedFiles);
+ setError(null);
+ setIsLoading(true);
+ void (async () => {
+ try {
+ await options?.onDrop?.(parsedFiles);
+ } catch (err) {
+ setError(err);
+ } finally {
+ setIsLoading(false);
+ }
+ })();
+ },
});
- const ref = (el: T) => { setRefTarget(() => el); flush(); };
-
- const removeFile = (fileName: string) => {
- setFiles(prev => prev.filter(f => f.name !== fileName));
- };
-
- const clearFiles = () => {
- setFiles([]);
- };
-
return {
- ref,
+ ref: drop.ref as (el: T) => void,
files,
error,
isLoading,
- isDragging,
- removeFile,
- clearFiles,
+ isDragging: drop.isOver,
+ removeFile: (fileName: string) => setFiles(prev => prev.filter(f => f.name !== fileName)),
+ clearFiles: () => setFiles([]),
};
}
/**
- * Ref callback factory for dropzone elements. Returns a single value that is
- * both a ref callback and a reactive state object — use it directly as a `ref`
- * while reading `.files`, `.isDragging`, etc. from the same reference.
+ * Ref callback factory that merges the drop zone state into the ref function
+ * itself. Use as both a `ref` and a reactive state object.
*
* @example
* ```tsx
diff --git a/packages/upload/src/index.ts b/packages/upload/src/index.ts
index cceabdf4a..201696ecb 100644
--- a/packages/upload/src/index.ts
+++ b/packages/upload/src/index.ts
@@ -1,7 +1,7 @@
export { createFilePicker } from "./createFilePicker.ts";
+export { createDropzone, dropzone } from "./createDropzone.ts";
export { createFileUploader } from "./createFileUploader.ts";
export { fileSender } from "./fileSender.ts";
export type { FileSenderOptions } from "./fileSender.ts";
-export { createDropzone, dropzone } from "./createDropzone.ts";
export { fileUploader } from "./fileUploader.ts";
export * from "./types.ts";
diff --git a/packages/upload/src/types.ts b/packages/upload/src/types.ts
index 3be0ab6c0..5e2284b87 100644
--- a/packages/upload/src/types.ts
+++ b/packages/upload/src/types.ts
@@ -21,6 +21,14 @@ export type FilePickerOptions = {
export type UserCallback = (files: UploadFile[]) => void | Promise;
+/**
+ * Fired for drag-movement events (enter/leave/over). The browser only exposes real
+ * `File` objects on `dataTransfer.files` at `drop` time — during movement events it's
+ * always an empty `FileList` — so these receive the raw `DragEvent` instead. Inspect
+ * `event.dataTransfer.items` / `.types` for metadata about what's being dragged.
+ */
+export type DragEventCallback = (event: DragEvent) => void | Promise;
+
export interface FilePicker {
files: Accessor;
error: Accessor;
@@ -46,18 +54,11 @@ export interface Dropzone {
clearFiles: () => void;
}
-/**
- * @property `accept` - Comma-separated list of one or more file types, or unique file type specifiers
- * @link `accept` - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
- */
export interface DropzoneOptions {
onDrop?: UserCallback;
- onDragStart?: UserCallback;
- onDragEnter?: UserCallback;
- onDragEnd?: UserCallback;
- onDragLeave?: UserCallback;
- onDragOver?: UserCallback;
- onDrag?: UserCallback;
+ onDragEnter?: DragEventCallback;
+ onDragLeave?: DragEventCallback;
+ onDragOver?: DragEventCallback;
}
export type UploadStatus = "idle" | "uploading" | "success" | "error" | "aborted";
diff --git a/packages/upload/test/index.test.tsx b/packages/upload/test/index.test.tsx
index 571d38190..30194a923 100644
--- a/packages/upload/test/index.test.tsx
+++ b/packages/upload/test/index.test.tsx
@@ -289,12 +289,9 @@ describe("createDropzone", () => {
const dispose = createRoot(dispose => {
createDropzone({
onDrop: vi.fn(),
- onDragStart: vi.fn(),
onDragEnter: vi.fn(),
- onDragEnd: vi.fn(),
onDragLeave: vi.fn(),
onDragOver: vi.fn(),
- onDrag: vi.fn(),
});
return dispose;
});
@@ -302,13 +299,47 @@ describe("createDropzone", () => {
}).not.toThrow();
});
+ it("onDragEnter/onDragLeave/onDragOver receive the raw DragEvent, not UploadFile[]", () => {
+ // dataTransfer.files is always empty during movement events in real browsers —
+ // these callbacks get the event itself so consumers can read dataTransfer.items/.types.
+ let enterArg: unknown, leaveArg: unknown, overArg: unknown;
+ const { ref, dispose } = createRoot(dispose => ({
+ ...createDropzone({
+ onDragEnter: e => { enterArg = e; },
+ onDragLeave: e => { leaveArg = e; },
+ onDragOver: e => { overArg = e; },
+ }),
+ dispose,
+ }));
+
+ const div = document.createElement("div");
+ ref(div);
+
+ const withDataTransfer = (type: string) => {
+ const event = new Event(type, { bubbles: true, cancelable: true });
+ Object.defineProperty(event, "dataTransfer", { value: { files: makeFileList() }, configurable: true });
+ return event;
+ };
+
+ const enterEvent = withDataTransfer("dragenter");
+ div.dispatchEvent(enterEvent);
+ const overEvent = withDataTransfer("dragover");
+ div.dispatchEvent(overEvent);
+ const leaveEvent = withDataTransfer("dragleave");
+ div.dispatchEvent(leaveEvent);
+
+ expect(enterArg).toBe(enterEvent);
+ expect(overArg).toBe(overEvent);
+ expect(leaveArg).toBe(leaveEvent);
+ expect(Array.isArray(enterArg)).toBe(false);
+
+ dispose();
+ });
+
it("isLoading is true while onDrop callback is pending, false after it resolves", async () => {
let resolve!: () => void;
- const blocker = new Promise(r => {
- resolve = r;
- });
+ const blocker = new Promise(r => { resolve = r; });
- // Capture isLoading via closure — onDrop is passed before the primitive returns
let getIsLoading!: () => boolean;
const { ref, dispose } = createRoot(dispose => {
const dz = createDropzone({ onDrop: () => blocker });
@@ -325,13 +356,13 @@ describe("createDropzone", () => {
configurable: true,
});
div.dispatchEvent(dropEvent);
- await Promise.resolve(); // flush setIsLoading(true)
+ await Promise.resolve();
expect(getIsLoading()).toBe(true);
resolve();
await blocker;
- await Promise.resolve(); // flush setIsLoading(false) from finally
+ await Promise.resolve();
expect(getIsLoading()).toBe(false);
dispose();
@@ -381,16 +412,13 @@ describe("createDropzone", () => {
flush();
expect(isDragging()).toBe(false);
- // Re-assign — el1 listeners should be removed, el2 should become active
ref(el2);
expect(removeSpy).toHaveBeenCalled();
- // el1 events no longer affect state
el1.dispatchEvent(new Event("dragenter"));
flush();
expect(isDragging()).toBe(false);
- // el2 events now drive state
el2.dispatchEvent(new Event("dragenter"));
flush();
expect(isDragging()).toBe(true);
@@ -401,18 +429,13 @@ describe("createDropzone", () => {
it("error() captures a thrown onDrop callback", async () => {
const boom = new Error("drop failed");
const { error, ref, dispose } = createRoot(dispose => ({
- ...createDropzone({
- onDrop: async () => {
- throw boom;
- },
- }),
+ ...createDropzone({ onDrop: async () => { throw boom; } }),
dispose,
}));
const div = document.createElement("div");
ref(div);
- // jsdom does not implement DragEvent — dispatch a plain Event with stubbed dataTransfer
const dropEvent = new Event("drop", { bubbles: true, cancelable: true });
Object.defineProperty(dropEvent, "dataTransfer", {
value: { files: makeFileList(makeFile()) },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2dc60dcec..d2011c3c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -402,6 +402,19 @@ importers:
specifier: 'catalog:'
version: 2.0.0-rc.0
+ packages/drag-drop:
+ dependencies:
+ '@solid-primitives/utils':
+ specifier: workspace:^
+ version: link:../utils
+ devDependencies:
+ '@solidjs/web':
+ specifier: 'catalog:'
+ version: 2.0.0-rc.0(solid-js@2.0.0-rc.0)
+ solid-js:
+ specifier: 'catalog:'
+ version: 2.0.0-rc.0
+
packages/event-bus:
dependencies:
'@solid-primitives/utils':
@@ -1388,9 +1401,9 @@ importers:
packages/upload:
dependencies:
- '@solid-primitives/event-listener':
+ '@solid-primitives/drag-drop':
specifier: workspace:*
- version: link:../event-listener
+ version: link:../drag-drop
devDependencies:
'@solidjs/web':
specifier: 'catalog:'
+