This repository has been archived by the owner on Sep 23, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 398
/
index.html
133 lines (123 loc) · 7.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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/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" />
<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">2017 © <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>