React js react-dropzone automatic opening when the page is loaded

Question

I am using react-dropzone, I would like to make the file upload dialog open automatically as soon as the page loads.

I wrote the following code, but I am not able to understand how to make it open automatically, it will be that I am doing something wrong with the ref because with I can access its properties.

Can you give me a hand?

Link: codesandbox

import React from "react";
import { useDropzone } from "react-dropzone";
import { Chip } from "@material-ui/core";
import { AttachFile } from "@material-ui/icons";

const Dropzone = React.forwardRef(
  ({ multiple = false, onOperation, onDelete }, ref) => {
    const [myFile, setMyFile] = React.useState([]);

    const inputRef = React.useRef(null);
    //const inputRef = React.createRef();
    React.useImperativeHandle(
      ref,
      () => ({
        upload: () => inputRef.current
      }),
      [inputRef]
    );

    const onDrop = React.useCallback(
      (acceptedFiles) => {
        setMyFile([...acceptedFiles]);
        onOperation(acceptedFiles);
      },
      [myFile, onOperation]
    );

    const { getRootProps, getInputProps } = useDropzone({
      onDrop
    });

    const removeAll = () => setMyFile([]);
    const file = myFile.map((file, key) => (
      <Chip
        key={key}
        icon={<AttachFile />}
        label={`${file.path} - ${file.size} bytes`}
        color="primary"
        onDelete={() => {
          removeAll();
          onDelete && onDelete();
        }}
        style={{
          cursor: "pointer",
          backgroundColor: "#2196f3"
        }}
      />
    ));

    const label = "File";

    return (
      <span {...getRootProps({ className: "drop-zone" })}>
        <input ref={inputRef} {...getInputProps()} multiple={multiple} />
        {file.length > 0 ? (
          file
        ) : (
          <Chip
            icon={<AttachFile />}
            label={label}
            color="primary"
            style={{
              cursor: "pointer",
              backgroundColor: "#2196f3"
            }}
          />
        )}
      </span>
    );
  }
);

export default function App() {
  const onDrop = (file) => console.log(file);
  //const ref = React.useRef(null);
  const ref = React.createRef();

  React.useEffect(() => {
    console.log("Ref:", ref.current, ref.current.upload());
    /*if (ref.current) {
      ref.current.open();
    }*/
  }, []);

  return (
    <div className="App">
      <Dropzone ref={ref} onOperation={onDrop} />
    </div>
  );
}

Answer 1

The ref that create in App is a ref to a your Dropzone component. Through useImperativeHandle, that ref has one property which is upload -- a function that returns either an input element or null.

Somehow the value is always null. At first I thought that the issue had to do with the order of execution. But that's not it. It's that your ref={inputRef} is getting overwritten by {...getInputProps()} which includes it's own ref property. If you switch the order and put your ref last then you'll start to log the <input> element.

But now clicking on the icon doesn't do anything because the react-dropzone package depends on the ref that we overwrote.

Fortunately the useDropzone hook returns an inputRef. So the same ref can be used for the internal react-dropzone logic and for your custom logic. It also returns an open function which you can use.

I deleted your inputRef and used the open function as the value of ref.upload.

const { getRootProps, getInputProps, open } = useDropzone({
  onDrop
});

React.useImperativeHandle(
  ref,
  () => ({
    upload: open
  }),
  [open]
);

I'm having no trouble getting it to open on click. But unfortunately @Marios Nikolaou's comment is correct. When I try to open it through a useEffect, I get a warning in the console:

File chooser dialog can only be shown with a user activation.

So what you want is not possible.