0

With the web application am developing student discussion platform, I want a student to attach file when posting a question, I do not want to use a button, Instead, a student just clicks a hyperlink and the upload dialog box opens.

How to do it?

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Ngode Danuel
  • 3
  • 5
  • Welcome to SO. Please visit the [help] and take the [tour] to see what and how to ask. HINT: Post code and efforts and do take more care when writing. A spell checker plugin would be useful for you. – mplungjan May 23 '16 at 08:57

1 Answers1

1

You can create file input inside the link and hide it with opacity. Also to make it accessible you can write a little bit of JavaScript.

link.addEventListener('keydown', (e) => {
  const { key } = e;
  if (key === 'Enter') {
    e.preventDefault();
    file.click();
  }
});
a {
  position: relative;
}
#file {
  position: absolute;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  cursor: pointer;
  right: 0;
}
<a href="#" id="link"><input type="file" id="file"/>Link text</a>
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • I roughly tested putting a file upload button inside a link and found that clicking the link itself doesn't activateI the button. So I suspect your code above is intended to places the button invisibly on top so that when the link is click the user is knowingly clicking on the button. I suspect this would create issues for screenreader users, who might then try and select the link and wonder why it's not working. – Dale de Silva Dec 26 '22 at 13:22
  • @DaledeSilva I'm not sure what you mean, you can test that code by running it. It works in Chrome Chrome (I'm not sure about other browsers). But anyway this answer was created 6 years ago and the question is closed. – jcubic Dec 26 '22 at 20:48
  • Thanks @jcubic . Yep, I'm aware this is old and there are links to other answers. Just leaving a note here for anyone who stumbles upon it like me. While it does work for users using a mouse. It's only because the invisible control blocks clicking the link with a mouse. As a rudimentary test, if you press tab to navigate the page, you'll select the link directly, and should notice hitting enter does nothing (Because the link text itself doesn't active the input button). Similarly, for screen readers, they would see a link with a name that implies it does something but does nothing. – Dale de Silva Dec 29 '22 at 00:36
  • @DaledeSilva yes, this is a hack that intercepts mouse clicks. Let me check if calling click() from JavaScript opens the modal. – jcubic Dec 29 '22 at 18:11
  • @DaledeSilva actually it works. You can use keydown event on a link and trigger click on the `input[type="file"]`. – jcubic Dec 29 '22 at 18:41
  • Hey @jcubic Appreciate all the testing you've done on this, and I certainly don't mean any disrespect to your creative solution. But while it does work if you know what to do, the issue is really that it is not a viable solution for users with screen readers - who won't know to do that, since it's presented as a link. Screen reader users also often use other methods to quickly activate links on a page that don't put their focus in the DOM and thus won't allow that work around even if they knew it (Experiment with Voice Over Rotor on osX VoiceOver if you wanna experience it). – Dale de Silva Jan 01 '23 at 12:11
  • Oh, actually, I think I misinterpreted your last comment. I thought you meant the user can press down after tabbing to the link to get to the input control. But now I realise you meant that in the link's activation event you can add code to then trigger the input dialog. Yeah, that would work! Nice one. – Dale de Silva Jan 01 '23 at 12:17
  • @DaledeSilva if you bring Screen Readers and Accessibility, then you should never use links to trigger file open dialog in the first place. The question was how to do this, not if you should. – jcubic Jan 01 '23 at 12:34