Dropzone: is it supposed to be used within <from> only or direct usage is also supported?

[warm-tune]

Basically I need to open image cropper on file selection, and no need to send file via form.
I am using onFileAccept callback to open cropper, but what should I do next to clean up component context?

I mean, I see there way to clear context (acceptedFiles) after file was accepted? Should I clear it at all?

Thanks.

[segunadebayo]

Yes, File Upload works standalone (no form required). Consider using transformFiles in your code for opening an image
cropper before accepting files.

When files are selected, transformFiles runs before they're added to acceptedFiles. This means you can:

1. Open your image cropper modal
2. Wait for the user to finish cropping
3. Return the cropped files
4. Only then will they appear in the component

Here's what that looks like:

function ImageUploadWithCropper() {
  const [openCropper, setOpenCropper] = useState(false)
  const [currentFile, setCurrentFile] = useState<File | null>(null)

  const [state, send] = useMachine(
    fileUpload.machine({
      id: useId(),
      transformFiles: async (files) => {
        const croppedFiles = await Promise.all(
          files.map(async (file) => {
            const blob = await new Promise<Blob>((resolve) => {
              setCurrentFile(file)
              setOpenCropper(true)
              document.addEventListener("crop:complete", (e) => resolve(e.detail), { once: true })
            })
            return new File([blob], file.name, { type: blob.type })
          }),
        )
        return croppedFiles
      },
    }),
  )

  const api = fileUpload.connect(state, send, normalizeProps)

  return (
    <div>
      {/* Your file upload UI */}
      <div {...api.getDropzoneProps()}>...</div>

      {/* Your cropper modal */}
      {openCropper && (
        <CropperModal
          file={currentFile}
          onComplete={(blob) => {
            document.dispatchEvent(new CustomEvent("crop:complete", { detail: blob }))
            setOpenCropper(false)
          }}
        />
      )}
    </div>
  )
}

Bonus: Show Loading State

While the user is cropping, the component exposes api.transforming:

<div {...api.getDropzoneProps()}>{api.transforming ? "Processing your images..." : "Drop images here"}</div>

Clearing Files

After you've done whatever you need with the cropped files, clear them with:

api.clearFiles()

No Form Required

To directly answer your question: No, File Upload doesn't need to be inside a <form>. It works perfectly standalone.
Use it however fits your workflow!

Hope this helps! Let me know if you need any clarification.

[warm-tune]

Thank you very much!