Skip to content

Instantly share code, notes, and snippets.

@fliiiix

fliiiix/fancyfileupload.html

Last active December 19, 2015 17:29
Show Gist options
  • Save fliiiix/5991875 to your computer and use it in GitHub Desktop.
Save fliiiix/5991875 to your computer and use it in GitHub Desktop.
Download ZIP
A fancy fileupload with java script (no jquery) and fontawesome & puress http://l33tsource.com/blog/2013/07/21/Fancy-File-Upload.html
Raw
fancyfileupload.html
<html>
<head>
<title>File Upload</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: inline-block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
max-width: 100px;
max-height: 10px;
}
.pull-left {float: left;}
.container {margin-top: 50px; margin-left: 50px;}
</style>
<script type="text/javascript">
function enableUpload() {
var uploadInput = document.getElementById('uploadInput');
if (uploadInput.value != ''){
//enables the submit button to upload the file
document.getElementById('submitButton').disabled = false;
//makes the file picker element invisible
document.getElementById('uploadDiv').style.display = 'none';
//shows the element which show the filename
document.getElementById('selectedFileDiv').style.display = '';
//removes span content and add the file name
var filenameSpan = document.getElementById('filename');
while( filenameSpan.firstChild ) {
filenameSpan.removeChild( filenameSpan.firstChild );
}
//adds the filename to the span
filenameSpan.appendChild( document.createTextNode(uploadInput.value) );
}
}
function selectNewFile() {
//shows the file picker element
document.getElementById('uploadDiv').style.display = '';
//makes the element which show the filename invisible
document.getElementById('selectedFileDiv').style.display = 'none';
//disable the submit button to upload the file
document.getElementById('submitButton').disabled = true;
//removes the file name in the input
document.getElementById('uploadInput').value = '';
}
</script>
</head>
<body>
<div class="container">
<form action="#" method="post">
<div id="selectedFileDiv" class="pure-button fileContainer pull-left" style="display:none;">
<i class="icon-remove" onclick="selectNewFile();"></i>
<span id="filename"></span>
</div>
<div id="uploadDiv" class="pure-button fileContainer pull-left">
<i class="icon-cloud-upload"></i>
<span>Select file</span>
<input type="file" name="file" id="uploadInput" onchange="enableUpload();" />
</div>
<input type="submit" value="Upload" id="submitButton" class="pure-button pure-button-primary pull-left" style="margin-left:10px;" disabled="disabled" />
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment