why do browsers control the input type file button?

Question

I am curious about why different browsers have different <input type="file"> button to browse the files. There are many questions asking how to style them, apparently some sort of "hacks" are used to alter them. But no one really explained why do browsers control it?

Answer 1

Still remember the time when there was only one browser? Browser has to set a default font if no font was used in the styling. Not only the fonts had defaults, the buttons also have defaults too. The elements needs to be displayed even if no styling is used.

Over the time, more browsers appear and they could have the same default font but no, they want to differentiate from each other.

Imagine that the developer forgets to style the button and there's no default for buttons. How will <input> looks like? A text floating around below a form? That's not very sightly.

Back to the question: file input button. It was given a fixed name for it initially and the current browsers are just continuing what was being implemented at first. Over the time, people got used to what file upload text they see in their browsers. Like what the reference below said, some people, such as elderly or not good with computers(not limited to) who don't use other browsers, may get confused upon seeing another string of text.

Reference : Change default text in input type="file"?

Therefore saying control is a little bit too strong. A fallback sounds much better. :)

Answer 2

AS @cweitat already indicated, this dates back to the early beginnings of HTML and browsers (you remember mosaic browser?).

At that time interacting between page data and the browser was restricted to HTML syntax and semantics. No javascript modifications had been available.

Nevertheless, the need for supporting upload of files (local to the browser) to the server (that served the page) was well accepted. The way to go was providing a version of the button logic for that purpose. Buttons had been the kind of HTML elements that allowed for activity originating from the browser side (besides links).

At that time elements on the page displayed where not thought of in terms of "widgets", so likely nobody considered to provide sufficient settings on the HTML element for influencing all visual and interaction aspects involved with a widget for choosing and uploading a file.

With later standardisation of DOM as an representation of "the page" and javascript as a mechanism for modifying various aspects programmatically, it was not surprising that "users" also tried to get more and more control over styling and visual representation of such kind of buttons.

On the other hand, the growing (and nearly exploding) possibilities of influencing page representations nowadays, also reduce the pressure for "extending" the current HTML element syntax. (I have seen lots of web pages that avoid using most standard HTML elements in favor of div with some javascript.)

So browser control <input type="file"/>, because they have to provide a suitable representation of this element. As there is no specification on the internal representation an implementation of this element has to follow, but there being some alternative to get the functionality without using such kind of element, it is unlikely browser vendors will bother exposing internal state for page developers to fiddle with (and this way allowing more control).

In contrast to other buttons the visual representation of a file input button is a set of different visual components. One is the button itself. Another is the field showing the selected file. Also (at least logically) a pop-up window showing available files, probaby some filter logic and more buttons are also part of the functionality. (Even if the later parts usually are brought in from the window or operating system environment, but this is an implementation detail.)

Now the mere HTML element does not allow to specify styling with sufficient detail. E.g. specifying background color: Should this apply to the button element or also to the feedback area (selected file), or maybe even to the file selection pop-up? Browser developpers could have decided to exhibit some of the internal structuring of components used to the "user. However, in formaer days it was not "interesting" enough and today you may use other mechanisms.