News for hackers. Stuff that matters.

A comment on The easiest way to keep your web apps accessible: Just use text. Parent comment

Re:The easiest way to keep your web apps accessible: Just us... by megous on Wednesday August 15, 2018 @02:08PM (#17768299)
You realize you don't need input field for file input in any of the modern browsers. Just capture the click event and create input field temporarily.

    let i = document.createElement('input');
    i.type = 'file';
    // other attributes if you like
    i.onselect = ev => {
      // ev.files contains selected files
    };
    i.click();
    i.remove();
No stupid styling hacks needed. At most you may need tabIndex on the <a> or <div> that represents the button for selecting files.

You can leave <input type=file> around if you want to submit data via <form> and not via XHR.

[ Parent | on HN ]
Re:The easiest way to keep your web apps accessible: Just us... by aaaaaaaaaab on Wednesday August 15, 2018 @07:04PM (#17770505)
>No stupid styling hacks needed.

You’ve just replaced them with stupid DOM hacks.

[ Parent | on HN ]
Re:The easiest way to keep your web apps accessible: Just us... by megous on Thursday August 16, 2018 @10:03AM (#17774658)
Not a hack, just regular API.

You clearly never implemented any of the above stupidity with file input styling and overlays and passthrough of events, and different unchangeable widths of file inputs you had to account for in various versions of browsers, and bugs in specific browser versions, and discontinuity in the input field clickable surface so part of the button is not clickable for no reason whatsoever to the user, so that everything works as expected in E6+IE7+IE8+IE9+FF1+Sfari,... to think it's even comparable on the hackiness scale.

[ Parent | on HN ]
Re:The easiest way to keep your web apps accessible: Just us... by vinceguidry on Wednesday August 15, 2018 @03:22PM (#17768912)
That would have saved me a ton of effort if I had known that before getting started. Thanks, I'll keep that technique in mind for next time.
[ Parent | on HN ]
Re:The easiest way to keep your web apps accessible: Just us... by MartijnBraam on Wednesday August 15, 2018 @07:39PM (#17770685)
Please don't do this unless you also handle dragging files on it.
[ Parent | on HN ]
Re:The easiest way to keep your web apps accessible: Just us... by megous on Thursday August 16, 2018 @09:52AM (#17774584)
That's another issue easily solved by DnD API modern browsers implement. And should probably be done differently with regards to UX depending on whether the clicky part was a button, or a larger upload area.

Frankly, I don't find the original UX of dragging files onto an upload button all that intuitive. So instead I add drop functionality to a larger container in my apps. So if I have dialog that accepts files, users can drag files anywhere over the dialog and the dialog highlights that it accepts drops while dragging.

[ Parent | on HN ]