jQuery widget to style HTML File Input
npm install @sjaakp/stylefilejQuery Stylefile
================
File input HTML controls are notorious because they are almost impossible to style by means of CSS. Each browser implements the file input in it's own way.
Stylefile is a jQuery widget that takes over the HTML file input control and allows it to be styled like the rest of the page. In addition, it gives the user more feedback on the selected file.
body part, load the jQuery library:
document.ready handler, like:
"btn btn-default" (consistent with Bootstrap CSS).
"Browse".
3.
"text-muted", another Bootstrap classname.
{filename} the name of the selected file
{imgsize} the image size, in pixels (w x h)
{nbytes} the file size in bytes
{nice_nbytes} the file size in a more readable format.
'{filename} {imgsize}
{nice_nbytes} ({nbytes} bytes)'