custom file input button, creating an invisible input file type inside div inside button for file input

Question

I would like to make a file input button like the one in Amazon write a review pictured below

How is it possible that the entire button opens up the file dialog on click if the input file type is hidden?

My code here hides the input file type button but does not open the file dialog. It is using React with tailwind classes

    <button
      type="button"
      className="p-6"
    >
      <div aria-label="Add a photo">
        <HiOutlinePlus className="text-4xl" />
        <input type="file" accept="image/*" className="hidden" />
      </div>
    </button>

You can use ref to get reference of the input, and then when the add button is clicked, click the input with code — Tanay
– Tanay, Commented Apr 20, 2022 at 4:12

mardubbles · Accepted Answer · 2022-04-20 04:13:08Z

3

How is it possible that the entire button opens up the file dialog on click if the input file type is hidden?

The probably use a separate widget that then opens the hidden file input on click, as follows:

function openFileUpload() {
  document.getElementById("hiddenFile").click();
}

<button onclick="openFileUpload()" type="button">Visible Button</button>
<input type="file" id="hiddenFile" style="visibility:hidden">

answered Apr 20, 2022 at 4:13

mardubbles

1396 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

custom file input button, creating an invisible input file type inside div inside button for file input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related