Next.js Discord

Discord Forum

shadcn form with react dropzone

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
im having difficulty integrating my react dropzone component with shadcn form component (which is based on reack-hook-form). im using zod for client side verification.

7 Replies

American black bearOP
export const DropzoneComponent = () => {
  const [files, setFiles] = useState([])
  const onDrop = useCallback((acceptedFiles: any, rejectedFiles: any) => {
    if (acceptedFiles?.length) {
      //@ts-expect-error
      setFiles(previousFiles => [
        ...previousFiles,
        ...acceptedFiles.map((file: Blob | MediaSource) =>
          Object.assign(file, { preview: URL.createObjectURL(file) })
        )
      ])
    }
  }, [])
  const removeFile = (name: any) => {
    //@ts-expect.error
    setFiles(files => files.filter(file => file.name !== name))
  }
  const previews = files.map((file, index) => {
    console.log(file)
    const imageUrl = URL.createObjectURL(file);
    console.log(imageUrl)
    return <div className="flex flex-row w-full justify-center  border border-gray rounded-lg bg-gray-100">
      <video width="240" height="640" src={imageUrl} controls onLoad={() => URL.revokeObjectURL(imageUrl)}></video>
      <Button variant="secondary" onClick={() => (removeFile(file.name))}><X></X></Button>
    </div>;
  });
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop, accept: {
      "video/*": [".mp4"]
    },
    maxSize: 4000000000
  })

  return (
    <div className="flex h-full">
      {!!files.length ? (
        previews
      ) : (
        <div {...getRootProps()} className="flex flex-col w-full border rounded-lg h-full bg-gray-100 justify-center">
          <div>
            <input {...getInputProps()} />
            <div className="flex flex-col justify-center items-center space-y-3" >
              <PlusCircle color="#9ca3af" />
              <div>
                <Text ta="center" className="text-gray-400">Drop your videos here</Text>
                <Text ta="center" className="text-gray-400 text-xs">Only MP4, max size is 4GB</Text>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
this is my dropzone component
for the form im using the shadcn guide, this is the link: https://ui.shadcn.com/docs/components/form
American black bearOP
bump
Clown
Dont know what issue you are having. If its not being able to include the images inside the returned form output, i usually just use "form.setValues".
@Clown Dont know what issue you are having. If its not being able to include the images inside the returned form output, i usually just use "form.setValues".
American black bearOP
i cannot adapt the dropzone component following the tutorial set by shadcn to the form, i have no idea how to do it tbh
and how do i display the error messages that zod shows in the form?