Help with customizing file upload. File upload popup not showing after using display none on input
Im having issues where file upload popup is not showing when i used display none on input.
i saw few tutorials and tried to replicate but didnt work out.
can someone find where the issue is
https://codepen.io/avinash-tallapaneni/pen/MWPyvQe
9 Replies
i mean..the sole purpose of display none is to NOT let items show up.. what's the problem
When I click on label it should open up popup but it's not
If you want a pop up look into the
dialog element. It was made for pop-ups 😃 👍🏻I don't know what it is called but when u click on choose file it will open another windows to browse file. I want something like that.
- HTML: HyperText Markup Language | MDN
elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.
Yeah, i wanted something like this. i dont want default styling like choose file btn so i used display none on it. that input file name and label for are same so technically if i click on label it should open the window but its not in my case
That doesn't really make much sense to me. If you don't like the default styling, hide/remove the default styles and style it the way you want to. You're reinventing the wheel for no reason
If you really want to spend extra development time, you can add a click event listener to the other element that you have where the callback function clicks the input type=file element
I'd reckon it's probably pretty bad for accessibility if you did it that way, as well as wasting development time. Look into aria-roles/labels and see if you can add something to your new element to make it accessible
Stack Overflow
How to add wai-aria property for file picker?
I am currently following this tutorial to have a file picker functionality.
http://www.alecjacobson.com/weblog/?p=1645
I would like to add wai-aria attribute for "choose file" part to make it read...
Added id which is equal to label name did the trick. Now default styling is hidden and can use upload feature