File upload does not work for small devices (Mobile)

[Sahil-pvt]

After selecting a file, the upload process should start, but it isn't working.

Screenrecorder-2023-11-06-21-05-14-944.mp4

[stabildev]

Solution: react-dropzone/react-dropzone#1196 (comment)

const { open } = useDropzone()

return (
  ...
  <Dropzone
      noClick={true}
      ...
  >
      {({ getRootProps, getInputProps, acceptedFiles }) => (
        <div
          onClick={open}
          ...

[Sahil-pvt]

Solution: react-dropzone/react-dropzone#1196 (comment)

const { open } = useDropzone()

return (
  ...
  <Dropzone
      noClick={true}
      ...
  >
      {({ getRootProps, getInputProps, acceptedFiles }) => (
        <div
          onClick={open}
          ...

It works in localhost but not in deployed version
Check this:- https://github.com/Sahil-pvt/PDFAskMate/blob/master/src/components/UploadButton.tsx

[stabildev]

You have to destructure open from the useDropzone hook:

import Dropzone, { useDropzone } from 'react-dropzone'
...
const { open } = useDropzone()

You're passing in open as a prop from the dialog which is false.

Can confirm that it 100% works on iPhone.

[Sahil-pvt]

You have to destructure open from the useDropzone hook:

import Dropzone, { useDropzone } from 'react-dropzone'
...
const { open } = useDropzone()

You're passing in open as a prop from the dialog which is false.

Can confirm that it 100% works on iPhone.

Again same problem!!

[stabildev]

You have to destructure open from the useDropzone hook:

import Dropzone, { useDropzone } from 'react-dropzone'
...
const { open } = useDropzone()

You're passing in open as a prop from the dialog which is false.
Can confirm that it 100% works on iPhone.

Again same problem!!

https://gist.github.com/stabildev/6cb5651db2f97274a6ce8f6355679648

[Sahil-pvt]

You have to destructure open from the useDropzone hook:

import Dropzone, { useDropzone } from 'react-dropzone'
...
const { open } = useDropzone()

You're passing in open as a prop from the dialog which is false.
Can confirm that it 100% works on iPhone.

Again same problem!!

https://gist.github.com/stabildev/6cb5651db2f97274a6ce8f6355679648

Still not working 🙃, btw thanks for this

[inextdeve]

im faced the same problem and this code is work properly with me:

import { useDropzone } from "react-dropzone";
....
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
    multiple: false,
    accept: { "application/pdf": [] },
    noClick: isUploading,
    onDrop: async (acceptedFile) => {
      //put onDrop func logic
    },
  });
  return <div
      {...getRootProps()}
      className="border h-64 m-4 border-dashed border-gray-300 rounded-lg"
    >
    .....
    <input {...getInputProps()} className="hidden" />
   </div>

[vladamilanovic]

Same problem. not working for me too.

• Next.js v13.2.4,
• react-dropzone v14.2.3