Function UploadButton

packages/solid/src/components/button.tsx:73–311

(
  props: FileRouter extends TRouter
    ? ErrorMessage<"You forgot to pass the generic">
    : UploadButtonProps<TRouter, TEndpoint>,
)

 * />
 */
export function UploadButton<
  TRouter extends FileRouter,
  TEndpoint extends keyof TRouter,
>(
  props: FileRouter extends TRouter
    ? ErrorMessage<"You forgot to pass the generic">
    : UploadButtonProps<TRouter, TEndpoint>,
) {
  const $props = props as UploadButtonProps<TRouter, TEndpoint>;

  const {
    mode = "auto",
    appendOnPaste = false,
    cn = defaultClassListMerger,
  } = $props.config ?? {};
  let acRef = new AbortController();

  let inputRef: HTMLInputElement;
  const [uploadProgress, setUploadProgress] = createSignal(0);
  const [files, setFiles] = createSignal<File[]>([]);

  const uploadThing = __createUploadThingInternal(
    resolveMaybeUrlArg($props.url),
    $props.endpoint,
    $props.fetch ?? globalThis.fetch,
    {
      signal: acRef.signal,
      headers: $props.headers,
      onClientUploadComplete: (res) => {
        setFiles([]);
        inputRef.value = "";
        void $props.onClientUploadComplete?.(res);
        setUploadProgress(0);
      },
      uploadProgressGranularity: $props.uploadProgressGranularity,
      onUploadProgress: (p) => {
        setUploadProgress(p);
        $props.onUploadProgress?.(p);
      },
      onUploadError: $props.onUploadError,
      onUploadBegin: $props.onUploadBegin,
      onBeforeUploadBegin: $props.onBeforeUploadBegin,
    },
  );

  const fileInfo = () => generatePermittedFileTypes(uploadThing.routeConfig());

  const state = () => {
    const ready = fileInfo().fileTypes.length > 0;

    if ($props.disabled) return "disabled";
    if (!ready) return "readying";
    if (!uploadThing.isUploading()) return "ready";
    return "uploading";
  };

  const uploadFiles = (files: File[]) => {
    const input = "input" in $props ? $props.input : undefined;