Spectre: input type file

[melkior]

Hi,

is there a plan to change 'input type file' look? It's a bit delicate problem, heck I can't make it properly, but defaults are just soooo ugly.

Thank you

[picturepan2]

Hi, I tried file input control, but it lacks file path string only with CSS. I will see there is another solution.

[tomlutzenberger]

According to a StackOverflow Article there's (due to security reasons) no way to extract the file path.
But here's a good Article about how to style it:
Tympanus: Styling & Customizing File Inputs the Smart Way

Is it really necessary to show the file path?

[melkior]

Yeah, input type file is screwed, maybe it would be best to make simple solution (just button) and leave paths to user (because of js)? Really not sure.

[tomlutzenberger]

There are good reasons, that access to the file path(s) is not accessible.
In my opinion, just a button would be enough as long as you style it properly and make it recognizable and accessible.
Even Google does it.

[dak0rn]

While there is no CSS-only solution, most browsers support the JavaScript File API which allows to access at least the name. Requires JavaScript, though.

[kleninb]

http://jsfiddle.net/barney/uxPjN/

[picturepan2]

@tomlutzenberger Can you show me how Google does it?

[tomlutzenberger]

I saw it in Tag Manager recently.
Go to "Admin / Import Container".
They do it as follows:

HTML

<div class="gtm-container-import-fileupload-button ng-isolate-scope" gtm-file-input="" file="ctrl.file" name="uploadedFile" button-text="Choose container file"><button type="button" class="btn btn-raised" ng-click="fileUploadClicked()">
  <i class="gtm-container-import-file-icon gtm-file-input-icon-small"></i>
  <!-- ngIf: !file --><span ng-if="!file" class="ng-binding ng-scope">
    Choose container file
  </span><!-- end ngIf: !file -->
  <!-- ngIf: file -->
</button>
<input type="file" name="uploadedFile" style="visibility: hidden;"></div>

CSS

.btn.btn-raised, button.btn-raised, input[type="submit"].btn-raised {
    background: transparent;
    border: none;
    box-shadow: none;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
    padding-right: 8px;
    text-transform: uppercase;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12);
    background: #f5f5f5;
    border-radius: 3px;
}
input:not([type='submit']), select, .gtm-form-input {
    background: #ffffff;
    border: solid 1px #c2c2c2;
    border-radius: 2px;
    color: #444444;
    font-family: Roboto,Arial,sans-serif;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
    vertical-align: middle;
}

JS

 /* ... */
}).directive("gtmFileInput",
    function ($timeout) {
        return {
            scope: {
                file: "=",
                buttonText: "@"
            },
            link: function (scope, element) {
                var inputFileElement = angular.element('<input type="file" name="' + element.attr("name") + '" style="visibility: hidden"/>');
                element.append(inputFileElement);
                inputFileElement.bind("change", function (event) {
                    scope.$apply(function () {
                        scope.file = event.target.files[0]
                    })
                });
                scope.fileUploadClicked = function () {
                    $timeout(function () {
                        inputFileElement.click()
                    })
                }
            },
            templateUrl: "/gtm/app/components/form/gtm-file-input.html"
        }
    }) /* ... */

As you can see, they use Angular and trigger the file input via JS.
That's way too much an complicated for somtehing like _spectre.css_.
I would just style it.

[artf]

My Q&D attempt of trying to achieve something without js but with filepath:

<label for="file-upload" class="fi">
  <div class="fi-c">
    <input id="file-upload" type="file"/>
  </div>
</label>

.fi {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    width:50%;
}

input[type="file"] {
  position: absolute;
  cursor: pointer;
  left: -71px;
  top: 0;
}

.fi-c{
  position: relative;
  overflow: hidden;
  height:20px;
}

http://jsfiddle.net/uk2xhz06/

[tomlutzenberger]

@artf Tested it in 5 Browsers (Chrome, FF, IE, Edge, Opera): Visible in each of them.
But a good start how to do it.