How can I get a file upload button's text?

Question

I'm writing documentation for a web platform and I want to refer to a file upload button in my instructions. However, the exact text on the button depends on the browser. For example, Firefox calls it Browse... and Chrome calls it Choose File.

<input type="file">

Is it possible to access (not change) that text programmatically? I know I can detect the browser and set the text in the documentation accordingly, or even use a workaround to set the button text, but that's not what I'm asking.

He wants to pull the actual text into his documentation, I guess, based on what is the actual text on the button, based on whatever browser the user uses, but without having to resort to fetching the browser-info. — junkfoodjunkie, Oct 27 '16 at 20:16
Unfortunately somebody deleted their answer so I will point to an answer from another question: http://stackoverflow.com/a/21842275/34806 — Dexygen, Oct 27 '16 at 20:28
@fenceop Are you trying to retrieve the value using client-side `javascript`? — guest271314, Oct 27 '16 at 20:28
please don't do what you're trying to do. just list the different browsers and what each button is. It'll make it a lot easier for someone who might have printed out the documentation and is referring to it on a different browser later, or the like. — andi, Oct 27 '16 at 20:29
@GeorgeJempty How is linked Question related to present Question? The `` element does not change the `.value` of the `` element within `ShadowDOM` of `` element. — guest271314, Oct 27 '16 at 20:30
But if you insist... is your documentation meant to be read on the web? If so, just insert the actual HTML element `` and then it'll appear how that browser wants it to appear. (with maybe an `onclick="return false"`) — andi, Oct 27 '16 at 20:31
@guest271314 it gives the OP a way to make the button text consistent across all browsers, eliminating the need for retreiving the button text from each individual browser. — APAD1, Oct 27 '16 at 20:31
@APAD1 That is not what OP is asking. The Question specifically asks: _"Is it possible to access (not change) that text?"_ — guest271314, Oct 27 '16 at 20:35
It solves the OP's problem but apparently we can't have any of that — Dexygen, Oct 27 '16 at 20:37
I think guest271314 is confusing "change" with "set" as in a setter of a property. If you can change the text so it is the same across browsers, I agree with paolobasso's approach. — Dexygen, Oct 27 '16 at 20:39
@GeorgeJempty Not confusing anything. The Question is clear. The expected result is not. It is not possible to "access" the `.value` of the `` element in `` element using client-side `javascript` alone. Perhaps suggest edit of Question is you believe the inquiry is other than the actual text of current Question. — guest271314, Oct 27 '16 at 20:43
@guest271314 thanks, but since it has already been established that it is NOT POSSIBLE to do what they are asking, I think giving other suggestions is perfectly fine. — APAD1, Oct 27 '16 at 20:54
@APAD1 Suggestions to do what? The Question is specifically: _"Is it possible to access (not change) that text programmatically?"_ The Answer is No. Though chrome, chromium do allow inspection of `ShadowDOM`. Do not currently have access to nightly; firefox default `Developer Tools` settings does not appear to have `ShadowDOM` inspection enabled by default. — guest271314, Oct 27 '16 at 20:56

KidBilly · Answer 1 · 2016-10-27T21:00:38.267

2

This text is set by how the browser renders that specific HTML element. There's no way to access or change that text. It will never be loaded into the DOM, so finding via jQuery is also not an option.

For your documentation, you may want to address what the IE version of the text will be, then list Chrome, Safari, Firefox, etc. It's the best way I can think of to explain to the user.

EDIT

Just thought I'd update and mention Shadow DOM because it's interesting and new to me. You can enable this in Chrome Dev Tools -> settings -> Show user agent shadow DOM. There you can actually view the rendered control and the text set to it. Although, it's not accessible programmatically through client side scripting. :(

edited Oct 27 '16 at 21:00

answered Oct 27 '16 at 20:18

KidBilly

3,408
1
26
40

_"There's no way to access or change that text."_ It is possible to view the `ShadowDOM` of the element which contains `` element where `.value` is the rendered text at chrome, chromium. – guest271314 Oct 27 '16 at 20:38
I don't have experience with this. But wouldn't it only be useful if the user is using Chrome, then? – KidBilly Oct 27 '16 at 20:41
Have not yet found a way to view the `ShadowDOM` of `` element at firefox. Will try nightly. It is not possible to "access (not change) that text programmatically". – guest271314 Oct 27 '16 at 20:46
How is the edited Answer different from this Answer http://stackoverflow.com/a/40293559/ ? – guest271314 Oct 27 '16 at 21:01
It mentions ShadowDOM. – KidBilly Oct 28 '16 at 05:30
The original Answer at http://stackoverflow.com/revisions/40293559/1 and current Answer both describe the `` element within `ShadowDOM` of `` element being the source of the displayed text. – guest271314 Oct 28 '16 at 05:51
1

Oh, by original answer, you mean yours. The context in which you used "original answer" made it seem like you were referring to my answer before the revision. Yes, same as your answer, just wanted to add it to make sure everyone sees it. – KidBilly Oct 28 '16 at 14:00

paolobasso · Answer 2 · 2016-10-27T20:25:47.137

1

You could use a label for the input_id and hide the input.

Example:

label {
/*Just to simulate a button, you will put your button style*/
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}

input {
/*hide the inout*/
  width: 0px;
  outline:none;
  opacity:0;
  visibility:none;
  height:0px;
  display:none;
}

<label for="b1">
    Name
    <input type="file" id="b1">
</label>

Working DEMO.

edited Oct 27 '16 at 20:25

answered Oct 27 '16 at 20:20

paolobasso

2,008
12
25

2

Ciao Paolo, I want to get the default text, not change it. – fenceop Oct 27 '16 at 20:30
3

@fenceop It is not possible to "get the default text" of the `.value` of the `` element within `` `ShadowDOM` which renders the text. – guest271314 Oct 27 '16 at 20:32

guest271314 · Answer 3 · 2016-11-04T22:59:32.293

Is it possible to access (not change) that text programmatically?

No. It is not possible to access the .value of the <input> element within <input type="file"> ShadowDOM which renders the text programmatically. The .shadowRoot property of <input type="file"> DOM element where the ShadowDOM is displayed is set to null.

Chrome, chromium exposes the .value of <input type="button" value="Choose File" pseudo="-webkit-file-upload-button"> at ShadowDOM of <input type="file"> element at .computedName property of input type="file" element

const UPLOAD_BUTTON_TEXT = document.querySelector("input[type=file]")
.computedName;
console.log(UPLOAD_BUTTON_TEXT);

<input type="file" />

At chrome, chromium you can view the element

<input type="button" value="Choose File" pseudo="-webkit-file-upload-button">

which renders the text at host <input type="file"> element by opening DevTools, selecting Settings, checking Show user agent shadow DOM, then inspecting the <input type="file"> element.

<input type="file">

So it doesn't really solve his problem of being able to access it programmatically. Although, it's the most interesting thing I've learned about dev tools in a LONG time. — KidBilly, Oct 27 '16 at 20:57
@CrazyPaste The "problem" cannot currently be solved. The `.value` cannot be accessed programmatically using client-side `javascript` — guest271314, Oct 27 '16 at 21:00

How can I get a file upload button's text?

3 Answers3

Linked