Material Design File Input
body {
display: flex;
}
.file_input_div {
margin: auto;
width: 250px;
height: 40px;
}
.file_input {
float: left;
}
#file_input_text_div {
width: 200px;
margin-top: -8px;
margin-left: 5px;
}
.none {
display: none;
}
var fileInputTextDiv = document.getElementById('file_input_text_div');
var fileInput = document.getElementById('file_input_file');
var fileInputText = document.getElementById('file_input_text');
fileInput.addEventListener('change', changeInputText);
fileInput.addEventListener('change', changeState);
function changeInputText() {
var str = fileInput.value;
var i;
if (str.lastIndexOf('\\')) {
i = str.lastIndexOf('\\') + 1;
} else if (str.lastIndexOf('/')) {
i = str.lastIndexOf('/') + 1;
}
fileInputText.value = str.slice(i, str.length);
}
function changeState() {
if (fileInputText.value.length != 0) {
if (!fileInputTextDiv.classList.contains("is-focused")) {
fileInputTextDiv.classList.add('is-focused');
}
} else {
if (fileInputTextDiv.classList.contains("is-focused")) {
fileInputTextDiv.classList.remove('is-focused');
}
}
}
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue_grey-red.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Material Design File Input </title>
</head>
<body>
<div class="file_input_div">
<div class="file_input">
<label class="image_input_button mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">file_upload</i>
<input id="file_input_file" class="none" type="file" />
</label>
</div>
<div id="file_input_text_div" class="mdl-textfield mdl-js-textfield textfield-demo">
<input class="file_input_text mdl-textfield__input" type="text" disabled readonly id="file_input_text" />
<label class="mdl-textfield__label" for="file_input_text"></label>
</div>
</div>
</body>
</html>