Skip to content

Commit 2862089

Browse files
mikeludemannmikeludemann
committed
Setup complete - custom-input-file
1 parent 361b9c2 commit 2862089

File tree

7 files changed

+472
-0
lines changed

7 files changed

+472
-0
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# OS Generate Files #
2+
######################
3+
.DS_Store
4+
.DS_Store?
5+
._*
6+
.Spotlight-V100
7+
.Trashes
8+
Desktop.ini

‎index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Modern custom input file</title>
8+
<link rel="stylesheet" href="./src/custom--1/styles/styles.css">
9+
<link rel="stylesheet" href="./src/custom--2/styles/styles.css">
10+
<link rel="stylesheet" href="./src/custom--2//libs/normalize.css">
11+
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
12+
</head>
13+
<body>
14+
<div id="custom--1">
15+
<div class="content--1">
16+
<form action="#">
17+
<div class="input-file-container">
18+
<input class="input-file" id="my-file" type="file">
19+
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file</label>
20+
</div>
21+
<p class="file-return"></p>
22+
</form>
23+
</div>
24+
</div>
25+
<hr>
26+
<div id="custom--2">
27+
<div class="content--2">
28+
<div class="box">
29+
<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
30+
<label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Select a file</span></label>
31+
</div>
32+
</div>
33+
<div class="content--2">
34+
<div class="box">
35+
<input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" data-multiple-caption="{count} files selected" multiple />
36+
<label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Select a file</span></label>
37+
</div>
38+
</div>
39+
<div class="content--2">
40+
<div class="box">
41+
<input type="file" name="file-3[]" id="file-3" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple />
42+
<label for="file-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Select a file</span></label>
43+
</div>
44+
</div>
45+
<div class="content--2">
46+
<div class="box">
47+
<input type="file" name="file-4[]" id="file-4" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple />
48+
<label for="file-4"><span>Select a file</span></label>
49+
</div>
50+
</div>
51+
<div class="content--2">
52+
<div class="box">
53+
<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
54+
<label for="file-5"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span>Select a file</span></label>
55+
</div>
56+
</div>
57+
<div class="content--2">
58+
<div class="box">
59+
<input type="file" name="file-6[]" id="file-6" class="inputfile inputfile-5" data-multiple-caption="{count} files selected" multiple />
60+
<label for="file-6"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span></span></label>
61+
</div>
62+
</div>
63+
<div class="content--2">
64+
<div class="box">
65+
<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" data-multiple-caption="{count} files selected" multiple />
66+
<label for="file-7"><span></span> <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> Select a file</strong></label>
67+
</div>
68+
</div>
69+
</div>
70+
<script src="./src/custom--1/script/script.js"></script>
71+
<script src="./src/custom--2/script/script.js"></script>
72+
</body>
73+
</html>

‎src/custom--1/script/script.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
document.querySelector("html").classList.add('js');
2+
3+
var fileInput = document.querySelector( ".input-file" ),
4+
button = document.querySelector( ".input-file-trigger" ),
5+
fileName = document.querySelector(".file-return");
6+
7+
button.addEventListener( "keydown", function( event ) {
8+
9+
if ( event.keyCode == 13 || event.keyCode == 32 ) {
10+
11+
fileInput.focus();
12+
13+
}
14+
15+
});
16+
button.addEventListener( "click", function( event ) {
17+
18+
fileInput.focus();
19+
20+
return false;
21+
22+
});
23+
24+
fileInput.addEventListener( "change", function( event ) {
25+
26+
var text = this.value;
27+
var operatorElementSlash = text.lastIndexOf('/');
28+
var operatorElementBackSlash = text.lastIndexOf('\\');
29+
30+
var result;
31+
32+
if(operatorElementSlash > -1){
33+
34+
result = this.value.substring(operatorElementSlash + 1);
35+
36+
console.log(result);
37+
38+
fileName.innerHTML = result;
39+
40+
} else if (operatorElementBackSlash > -1){
41+
42+
result = this.value.substring(operatorElementBackSlash + 1);
43+
44+
console.log(result);
45+
46+
fileName.innerHTML = result;
47+
48+
}
49+
50+
});

‎src/custom--1/styles/styles.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.content--1 {
2+
margin: 10px;
3+
padding: 10px;
4+
}
5+
6+
.input-file-container {
7+
position: relative;
8+
width: 225px;
9+
}
10+
11+
.js .input-file-trigger {
12+
display: block;
13+
padding: 15px 15px;
14+
background: #13D261;
15+
color: #fff;
16+
font-size: 1em;
17+
transition: all .4s;
18+
cursor: pointer;
19+
}
20+
21+
.js .input-file {
22+
position: absolute;
23+
top: 0; left: 0;
24+
width: 225px;
25+
opacity: 0;
26+
padding: 14px 0;
27+
cursor: pointer;
28+
}
29+
30+
.js .input-file:hover + .input-file-trigger,
31+
.js .input-file:focus + .input-file-trigger,
32+
.js .input-file-trigger:hover,
33+
.js .input-file-trigger:focus {
34+
background: #138261;
35+
color: #fff;
36+
}
37+
38+
.file-return {
39+
margin: 0;
40+
}
41+
42+
.file-return:not(:empty) {
43+
margin: 1em 0;
44+
}
45+
46+
.js .file-return {
47+
font-size: .9em;
48+
font-weight: bold;
49+
}
50+
51+
/*.js .file-return:not(:empty):before {
52+
content: "Selected file: ";
53+
font-style: normal;
54+
font-weight: normal;
55+
}*/

‎src/custom--2/libs/normalize.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/custom--2/script/script.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict';
2+
3+
( function ( document, window, index )
4+
{
5+
var inputs = document.querySelectorAll( '.inputfile' );
6+
7+
Array.prototype.forEach.call( inputs, function( input )
8+
{
9+
10+
var label = input.nextElementSibling,
11+
labelVal = label.innerHTML;
12+
13+
input.addEventListener( 'change', function( e )
14+
{
15+
16+
var fileName = '';
17+
18+
if( this.files && this.files.length > 1 )
19+
20+
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
21+
22+
else
23+
24+
fileName = e.target.value.split( '\\' ).pop();
25+
26+
if( fileName )
27+
28+
label.querySelector( 'span' ).innerHTML = fileName;
29+
30+
else
31+
32+
label.innerHTML = labelVal;
33+
34+
});
35+
36+
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
37+
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
38+
39+
});
40+
41+
}( document, window, 0 ));

0 commit comments

Comments
 (0)