How to trigger file upload in React on a Div?-CodePudding

Hello I have a div component here and want to trigger a file upload onClick on the div is that possible?

            <div className="relative w-[150px] cursor-pointer">
          {" "}
          <Avatar className="mt-5" size="150" round={true} />{" "}
          <div className="rounded-full p-2 bg-white absolute  bottom-0 right-0">
            <AiFillEdit className="text-blue-700" />
          </div>
        </div>

CodePudding user response：

Yes, but you'll need to trigger a onClick or onChange event to some input type="file" first and "bind" this input to your component with a onClick method on it

CodePudding user response：

const onUpload = () => {
  document.getElementById('uploadFile').click();
}

const selectFile = () => {
  const [file] = document.getElementById('uploadFile').files
  console.log(file)
}

....

<div className="rounded-full p-2 bg-white absolute  bottom-0 right-0">
  <AiFillEdit className="text-blue-700" />
  <input type='file' id="uploadFile" style={{display: 'none'}} onChange={selectFile} />
</div>

I hope this will be helpful for you. Thanks