file upload not show up the dialog in html - html

Question

I have built a file upload in html but clicking the html element doesn't show up the upload dialog, have no idea why is it?
<div class="flex flex-col my-1">
<div tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</div>
</div>

Answer 1

You can associate a label with an input elsewhere in the code, by assigning an id to the input tag, and referencing that id in the for attribute of the label. Or you can wrap an input tag with the label element, and it will do the same
For eg:
<input id="fileUpload" style="display:none">
...
...
Some Code
...
...
<label for="fileUpload">Upload File</label>
In your case, you can opt for the second option. Instead of wrapping the hidden input element in a div element wrap it in a label element. That will allow you to trigger the input inside the label when any point in the label is clicked.
<div class="flex flex-col my-1">
<!-- Changed this from div to label. Also added a style of cursor:pointer -->
<label tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4" style="cursor:pointer">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</label>
</div>