Usage with React Aria's FileTrigger

[amosbastian]

I am trying to use this library with React Aria's FileTrigger

I was thinking I could just do something like

import { useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { z } from "zod";

const schema = z.object({
  thumbnail: z.instanceof(File, { message: "Thumbnail is required" }),
});

function Example() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

  const thumbnail = useInputControl(fields.thumbnail);

  return (
    <form method="POST" encType="multipart/form-data" id={form.id}>
      <FileTrigger
        acceptedFileTypes={["image/*"]}
        onSelect={(fileList) => {
          if (!fileList) return;
          const files = Array.from(fileList);
          setThumbnailPreview(URL.createObjectURL(files[0]));
          thumbnail.change(files[0]);
        }}
      >
        <Button className="self-start">
          Select a file
        </Button>
      </FileTrigger>
    </form>
  );
}

But the useInputControl line gives the error

Type 'File' is not assignable to type 'string | string[] | (string | undefined)[] | undefined'.

How else should I implement this?

[ThaddeusJiang]

same issue

I did some custom code deal this issue

 const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return

    const newFiles = Array.from(e.target.files)
    form.update({
      name: field.name,
      // @ts-expect-error conform-to types are not up to date
      files: newFiles,
    })

    const fileList = new DataTransfer()
    newFiles.forEach((file) => fileList.items.add(file))
    inputRef.current!.files = fileList.files

    setFiles(newFiles)
  }

    <input
        {...getInputProps(field, { type: "file" })}
        ref={inputRef}
        onChange={onChange}
        className="hidden"
        multiple={multiple}
        accept={accept}
      />

IMO: The inputControl.change only can change value, but the input[type="file"] should handle files.

[edmundhung]

The useInputControl hook does not support file input and it doesn't need to. Because there is no way to implement a file upload input without interacting with a real file input in the browser. All custom file input implementation are just a wrapper on top of it.

[ThaddeusJiang]

@edmundhung I see.

Since I'd like to use a delete button to delete file, so I have to custom input["type=file"] onchange and value.

There is my code, should I create a PR for File Upload Guide ? 😃

https://codesandbox.io/p/github/ThaddeusJiang/conform-file-upload-examples/main?file=/.codesandbox/tasks.json&workspaceId=d7b9ca57-a768-4c09-b136-fcd18b67b1ea

[edmundhung]

Your sandbox seems to be private. But I also wonder if your code above actually works 😅 it might looks like your have the value updated with the new files, but react won't be able to pick up the files object you provided and update the file input because of browser constraints. If you submit the form, it's likely that only the files that were selected at first would be included and all your manual changes is not applied.

For sure what you suggested is a valid usecase. I have some ideas that I can try it out if you can make your sandbox public :)

[ThaddeusJiang]

@edmundhung Sorry, my mistake.

https://codesandbox.io/p/github/ThaddeusJiang/conform-file-upload-examples/main

and my issues: ThaddeusJiang/conform-file-upload-examples#1

[edmundhung]

I would expect the <FileTrigger /> component to accept a name prop which become the name of it's internal file input. Then there is no need to use the useInputControl hook here.

If it doesn't work, please create a simple repo on stackblitz or codesandbox so I can take a deeper look.

[PCosta1990]

I have a same problem but i use react-dropzone and need use hooks to update a variable in conform, or only can use a form.update?

`import type { DropzoneOptions } from "react-dropzone";
import { useField, useInputControl } from "@conform-to/react";

const [meta] = useField(name);
const control = useInputControl(meta);

const { t } = useTranslation();
const {
getRootProps,
getInputProps,
// isDragActive,
// isDragReject,
// fileRejections,
} = useDropzone({
onDrop: (files) => control.change(files[0]),
// onDrop: (files) => console.log(files[0]),
accept: mimeType,
multiple: false,
...other,
});`