input type file about spectre HOT 10 CLOSED

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

from spectre.

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.

from spectre.

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

from spectre.

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?

from spectre.

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.

from spectre.

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.

from spectre.

@tomlutzenberger Can you show me how Google does it?

from spectre.

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.

from spectre.

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/

from spectre.

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

from spectre.