dropify
Version:
Override your input files with style.
93 lines (88 loc) • 5.25 kB
HTML
<html>
<head>
<title>Dropify — Override your input files with style.</title>
<meta name="description" content="">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,900|Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="dist/css/demo.css">
<link rel="stylesheet" href="dist/css/dropify.min.css">
</head>
<body>
<a href="https://github.com/JeremyFagis/dropify" target="_blank"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<header id="header">
<hgroup>
<h1>Dropify</h1>
<h2>Override your input files with style</h2>
</hgroup>
</header>
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<h2>Before</h2>
<label for="input-file-before">Basic HTML input file</label>
<input type="file" id="input-file-before" />
<hr class="big">
<h2>Now</h2>
<label for="input-file-now">Your so fresh input file — Default version</label>
<input type="file" id="input-file-now" class="dropify" data-default-file="" />
<br>
<label for="input-file-custom">You can add a default value</label>
<input type="file" id="input-file-now-custom-1" class="dropify" data-default-file="src/images/test-image-1.jpg" />
<br>
<label for="input-file-custom">You can set the height</label>
<input type="file" id="input-file-now-custom-2" class="dropify" data-height="500" />
<br>
<label for="input-file-custom">You can combine options</label>
<input type="file" id="input-file-now-custom-3" class="dropify" data-height="500" data-default-file="src/images/test-image-2.jpg" />
<br>
<label for="input-file-now">You can disabled the input</label>
<input type="file" id="input-file-now-disabled-1" class="dropify" disabled="disabled" />
<br>
<label for="input-file-now">Also with a default file</label>
<input type="file" id="input-file-now-disabled-2" class="dropify" disabled="disabled" data-default-file="src/images/test-image-1.jpg" />
<br>
<label for="input-file-now">You can add a max file size</label>
<input type="file" id="input-file-max-fs" class="dropify" data-max-file-size="2M" />
<p class="help">Max file size : 2M</p>
<br>
<h2>French one</h2>
<label for="input-file-now">"Et voilà"</label>
<input type="file" id="input-file-french-1" class="dropify-fr" data-default-file="" />
<br>
<label>"Avec options"</label>
<input type="file" id="input-file-french-2" class="dropify-fr" data-height="350" data-default-file="src/images/test-image-2.jpg" />
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6 no-padding-bottom">
<a href="https://github.com/JeremyFagis/dropify" target="_blank">Github repository</a>
</div>
<div class="col-sm-4 col-xs-6 text-right no-padding-bottom">2015 © <a href="http://www.fagis.fr" target="_blank">Jeremy FAGIS</a></div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/js/dropify.min.js"></script>
<script>
$(document).ready(function(){
$('.dropify').dropify();
$('.dropify-fr').dropify({
messages: {
defaultMessage: 'Glissez-déposez un fichier ici ou cliquez',
replaceMessage: 'Glissez-déposez un fichier ou cliquez pour remplacer',
removeMessage: 'Supprimer',
errorMessage: 'Désolé, le fichier trop volumineux'
}
});
});
</script>
</body>
</html>