Dropzone with Remix Form

[JasonWeise]

Hi All

I am wondering if anyone has managed to have Dropzone work with Remix Forms.

I am needing to use an action in Remix to perform a file upload and really like the Mantine Dropzone instead of a basic file input but I cannot figure out how to use either useSubmit from Remix or even alternatively just using Dropzone as a file input for the Remix Form.

Ideally I would like to drag and drop a file onto Dropzone and have the remix action upload the file (I have the action written and works fine with a vanilla file input)/

I am looking forward to any advice.

Thanks as always

[rjhalvorson]

I was able to get it to work doing something like this -- little bit of a hack.

In the Remix Action:

  const onDrop = useCallback((acceptedFiles: File[]) => {
    setFiles(acceptedFiles);

    if (inputRef.current) {
      const dataTransfer = new DataTransfer();
      acceptedFiles.forEach((file) => {
        dataTransfer.items.add(file);
      });
      inputRef.current.files = dataTransfer.files;
    }
  }, []);

And then in the form:
const inputRef = useRef<HTMLInputElement | null>(null);

        <input
          {...getInputProps()}
          name="file"
          type="file"
          ref={inputRef}
        />