#How to get the acceptedFile in Dropzone

8 messages · Page 1 of 1 (latest)

sharp star
#

In react-dropzone, I can access the acceptedFile like this. How to do it in mantine? Thank you

{({ getRootProps, getInputProps, acceptedfile }) => {
  {acceptedFiles?.[0] ? ():()}
}}
thorny siren
sharp star
# 
<Dropzone
      multiple={false}
      onDrop={(file) => console.log(file}
      onReject={(files) => console.log("rejected files", files)}
      maxSize={1 * 1024 ** 2}
      accept={MS_WORD_MIME_TYPE}
      {...props}
    >
      {({ file }) => (
        <div className="m-4 h-64 rounded-lg border border-dashed border-gray-300">
          <label
            htmlFor="dropzone-file"
            className="flex h-full w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-gray-50 hover:bg-gray-100"
          >
            <Dropzone.Accept>
              <FileCheck className="h-8 w-8" />
            </Dropzone.Accept>
            <Dropzone.Reject>
              <FileX className="h-8 w-8" />
            </Dropzone.Reject>
            <Dropzone.Idle>
              <File className="h-8 w-8" />
            </Dropzone.Idle>
            <h3 className="font-medium text-zinc-800">
              Drag images here or click to select files
            </h3>
            <p className="text-sm text-zinc-500">
              (You can attach multiple files, each up to 1MB)
            </p>
          </label>
        </div>
      )}
    </Dropzone>

I mean to access it like this

#

it's not props but children. And thank you for your quick response

thorny siren
sharp star
#

okay, could you give an example

# 
  const [acceptedFiles, setAcceptedFiles] = useState<FileWithPath | null>(null);

in the onDrop={(files) => setAcceptedFiles(files)}```

you mean like this?>
thorny siren