Upload

import { createFilePicker } from "@solid-primitives/upload";

// Single file
const { files, isLoading, error, selectFiles } = createFilePicker();

// Multiple files with MIME filter
const { files, isLoading, error, selectFiles } = createFilePicker({
  multiple: true,
  accept: "image/*",
});

// Open the picker and do something with the selection
selectFiles(async files => {
  await uploadToServer(files);
});

import { createFilePicker, createFileUploader, fileSender } from "@solid-primitives/upload";

const { selectFiles } = createFilePicker({ multiple: true, accept: "image/*" });
const { upload, files, progress, status } = createFileUploader(fileSender("/api/upload"));

<button onClick={() => selectFiles(fs => upload(fs))} disabled={status() === "uploading"}>
  Select & upload
</button>

<Show when={status() === "uploading"}>
  <progress value={progress().percentage} max={100} />
  <span>{progress().percentage}%</span>
</Show>

<For each={files}>{f =>
  <div>
    {f.file.name}
    <Show when={f.status === "error"}>
      <span> — failed: {String(f.error)}</span>
    </Show>
  </div>
}</For>

import { createFileUploader, fileSender } from "@solid-primitives/upload";

const { upload, files, progress, status, abort } = createFileUploader(fileSender("/api/upload"));

// upload() dispatches one request per file (in parallel); resolves when all settle
const results = await upload(myFiles);

type FileUploadEntry = {
  file: UploadFile;
  progress: UploadProgress; // { loaded, total, percentage }
  status: UploadStatus; // "idle" | "uploading" | "success" | "error" | "aborted"
  error: unknown; // error from a failed upload; null otherwise
  response: unknown; // parsed server response on success; null otherwise
};

<For each={files}>
  {f => (
    <div>
      {f.file.name} — {f.progress.percentage}%
      <Show when={f.status === "error"}>
        <span>Error: {String(f.error)}</span>
      </Show>
    </div>
  )}
</For>

import { fileSender } from "@solid-primitives/upload";

// Basic
createFileUploader(fileSender("/api/upload"));

// With options
createFileUploader(
  fileSender("/api/upload", { fieldName: "attachment", headers: { "X-Auth": token } }),
);

const { upload, progress, status } = createFileUploader(async (file, onProgress, signal) => {
  const body = new FormData();
  body.append("file", file.file, file.name);
  const res = await fetch("/api/upload", { method: "POST", body, signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
});

import { fileUploader } from "@solid-primitives/upload";
import { createSignal } from "solid-js";
import type { UploadFile } from "@solid-primitives/upload";

const [files, setFiles] = createSignal<UploadFile[]>([]);
const [uploadError, setUploadError] = createSignal<unknown>(null);

<input
  type="file"
  multiple
  accept="image/*"
  ref={fileUploader({
    userCallback: async fs => {
      await uploadToServer(fs);
    },
    setFiles,
    onError: err => setUploadError(err),
  })}
/>;

import { createDropzone, createFileUploader, fileSender } from "@solid-primitives/upload";

const { upload, progress, status } = createFileUploader(fileSender("/api/upload"));
const { ref, files, isDragging, error } = createDropzone({
  onDrop: files => upload(files),
});

<div
  ref={ref}
  style={{
    background: isDragging() ? "lightblue" : "lightgray",
    padding: "2rem",
    border: "2px dashed #999",
  }}
>
  <Show when={status() === "uploading"} fallback="Drop files here">
    Uploading… {progress().percentage}%
  </Show>
  <Show when={error()}>
    <p>Error: {String(error())}</p>
  </Show>
  <For each={files()}>{file => <p>{file.name}</p>}</For>
</div>;

import { dropzone, createFileUploader, fileSender } from "@solid-primitives/upload";

const { upload, progress, status } = createFileUploader(fileSender("/api/upload"));
const dz = dropzone({ onDrop: files => upload(files) });

<div
  ref={dz}
  style={{
    background: dz.isDragging() ? "lightblue" : "lightgray",
    padding: "2rem",
    border: "2px dashed #999",
  }}
>
  <Show when={status() === "uploading"} fallback="Drop files here">
    Uploading… {progress().percentage}%
  </Show>
  <For each={dz.files()}>{file => <p>{file.name}</p>}</For>
</div>;

type UploadFile = {
  source: string; // blob URL from URL.createObjectURL
  name: string;
  size: number;
  file: File;
};

type UploadStatus = "idle" | "uploading" | "success" | "error" | "aborted";

type UploadProgress = {
  loaded: number;
  total: number;
  percentage: number; // 0–100
};

type SendFunction = (
  file: UploadFile,
  onProgress: (progress: UploadProgress) => void,
  signal: AbortSignal,
) => Promise<unknown>;

type FileUploadEntry = {
  file: UploadFile;
  progress: UploadProgress;
  status: UploadStatus;
  error: unknown;
  response: unknown;
};

type UserCallback = (files: UploadFile[]) => void | Promise<void>;

// 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<void>;

type FilePickerOptions = {
  accept?: string;
  multiple?: boolean;
};

type FileSenderOptions = {
  fieldName?: string;
  headers?: Record<string, string>;
};

type FileUploaderDirective = {
  userCallback: UserCallback;
  setFiles: Setter<UploadFile[]>;
  onError?: (error: unknown) => void;
};