134 lines
7.3 KiB
HTML
134 lines
7.3 KiB
HTML
<!DOCTYPE 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/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" />
|
||
<br />
|
||
<label for="input-file-now-custom-1">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-now-custom-2">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-now-custom-3">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-disabled-1">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-disabled-2">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-max-fs">You can add a max file size</label>
|
||
<input type="file" id="input-file-max-fs" class="dropify" data-max-file-size="2M" />
|
||
<br />
|
||
<label for="input-file-disable-remove">You can disable remove button</label>
|
||
<input type="file" id="input-file-disable-remove" class="dropify" data-show-remove="false" />
|
||
<br />
|
||
<label for="input-file-events">You can use events</label>
|
||
<input type="file" id="input-file-events" class="dropify-event" data-default-file="src/images/test-image-1.jpg" />
|
||
<br />
|
||
<label for="input-file-to-destroy">You can destroy it <button type="button" id="toggleDropify">Init/Destroy</button></label>
|
||
<input type="file" id="input-file-to-destroy" class="dropify" data-default-file="src/images/test-image-1.jpg" />
|
||
<br />
|
||
<label for="input-file-to-destroy">Multiple options are available</label>
|
||
<input type="file" id="input-file-to-destroy" class="dropify" data-allowed-formats="portrait square" data-max-file-size="2M" data-max-height="2000" />
|
||
<p class="help">Only portrait or square images, 2M max and 2000px max-height.</p>
|
||
<br />
|
||
<h2>French one</h2>
|
||
<label for="input-file-french-1">"Et voilà"</label>
|
||
<input type="file" id="input-file-french-1" class="dropify-fr" data-default-file="" />
|
||
<br />
|
||
<label for="input-file-french-2">"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">2016 © <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(){
|
||
// Basic
|
||
$('.dropify').dropify();
|
||
|
||
// Translated
|
||
$('.dropify-fr').dropify({
|
||
messages: {
|
||
default: 'Glissez-déposez un fichier ici ou cliquez',
|
||
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
|
||
remove: 'Supprimer',
|
||
error: 'Désolé, le fichier trop volumineux'
|
||
}
|
||
});
|
||
|
||
// Used events
|
||
var drEvent = $('#input-file-events').dropify();
|
||
|
||
drEvent.on('dropify.beforeClear', function(event, element){
|
||
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
|
||
});
|
||
|
||
drEvent.on('dropify.afterClear', function(event, element){
|
||
alert('File deleted');
|
||
});
|
||
|
||
drEvent.on('dropify.errors', function(event, element){
|
||
console.log('Has Errors');
|
||
});
|
||
|
||
var drDestroy = $('#input-file-to-destroy').dropify();
|
||
drDestroy = drDestroy.data('dropify')
|
||
$('#toggleDropify').on('click', function(e){
|
||
e.preventDefault();
|
||
if (drDestroy.isDropified()) {
|
||
drDestroy.destroy();
|
||
} else {
|
||
drDestroy.init();
|
||
}
|
||
})
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|