Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 28, 2015 16:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/fb3b8082a20181db2ba1 to your computer and use it in GitHub Desktop.
Save anonymous/fb3b8082a20181db2ba1 to your computer and use it in GitHub Desktop.
Download ZIP
UIKit Upload example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/components/upload.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/uikit.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/components/upload.min.js"></script>
<script type="text/javascript">
$(function(){
var progressbar = $("#progressbar"),
bar = progressbar.find('.uk-progress-bar'),
settings = {
action: '/upload',
allow : '*.(jpg|jpeg|gif|png)',
filelimit: 1,
loadstart: function() {
bar.css("width", "0%").text("0%");
progressbar.removeClass("uk-hidden");
},
progress: function(percent) {
percent = Math.ceil(percent);
bar.css("width", percent+"%").text(percent+"%");
},
allcomplete: function(response) {
bar.css("width", "100%").text("100%");
setTimeout(function(){
progressbar.addClass("uk-hidden");
}, 250);
alert("Upload Completed")
}
};
var select = UIkit.uploadSelect($("#upload-select"), settings),
drop = UIkit.uploadDrop($("#upload-drop"), settings);
});
</script>
</head>
<body>
<div id="upload-drop" class="uk-placeholder">
Info text... <a class="uk-form-file">Select a file<input id="upload-select" type="file"></a>.
</div>
<div id="progressbar" class="uk-progress uk-hidden">
<div class="uk-progress-bar" style="width: 0%;">...</div>
</div>
</body>
</html>
@colinwoor
Copy link

meep
,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment