-
Notifications
You must be signed in to change notification settings - Fork 64
/
upload.html
209 lines (193 loc) · 9.44 KB
/
upload.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
{% extends "admin/base_site.html" %}
{% load i18n admin_modify %}
{% load raw %}
{% load staticfiles %}
{% block title %}Multiupload {{ block.super }}{% endblock %}
{% block extrahead %}{{ block.super }}
<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
{% url 'admin:jsi18n' as jsi18nurl %}
<script type="text/javascript" src="{{ jsi18nurl|default:"../../../jsi18n/" }}"></script>
{{ media }}
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}" /></script>
<script src="{% static 'jquery/jquery.1.8.0.min.js' %}"></script>
<script src="{% static 'jquery/jquery.ui.widget.js' %}"></script>
<script src="{% static 'jquery/tmpl.min.js' %}"></script>
<script src="{% static 'jquery/load-image.min.js' %}"></script>
<script src="{% static 'jquery/canvas-to-blob.min.js' %}"></script>
<script src="{% static 'jquery/bootstrap.min.js' %}"></script>
<script src="{% static 'jquery/bootstrap-image-gallery.min.js' %}"></script>
<script src="{% static 'jquery/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'jquery/jquery.fileupload.js' %}"></script>
<script src="{% static 'jquery/jquery.fileupload-fp.js' %}"></script>
<script src="{% static 'jquery/jquery.fileupload-ui.js' %}"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="{% static 'jquery/jquery.xdr-transport.js' %}"></script><![endif]-->
{% endblock %}
{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}" />
<!-- Bootstrap Image Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-File-Upload/css/jquery.fileupload-ui.css">
{% endblock %}
{% block coltype %}{% if ordered_objects %}colMS{% else %}colM{% endif %}{% endblock %}
{% block bodyclass %}{{ opts.app_label }}-{{ opts.object_name.lower }} change-form{% endblock %}
{% block breadcrumbs %}{% if not is_popup %}
<div class="breadcrumbs">
{% if object %}
<a href="../../../../">{% trans "Home" %}</a> ›
<a href="../../../">{{ app_label|capfirst|escape }}</a> ›
<a href="../../">{{ opts.verbose_name_plural|capfirst }}</a> ›
<a href="../">{{ object }}</a> ›
{% trans "Multiupload" %}
{% else %}
<a href="../../../">{% trans "Home" %}</a> ›
<a href="../../">{{ app_label|capfirst|escape }}</a> ›
<a href="../">{{ opts.verbose_name_plural|capfirst }}</a> ›
{% trans "Multiupload" %}
{% endif %}
</div>
{% endif %}{% endblock %}
{% block content %}
<a href="../{%if is_popup %}?pop=1{% endif %}">{% trans 'back' %}</a>
<form id="fileupload" action="." method="POST" enctype="multipart/form-data">
<div class="row fileupload-buttonbar">
<div class="span7">
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>{% trans 'Add files' %}</span>
<input type="file" name="files[]" multiple="">
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>{% trans 'Start upload' %}</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>{% trans 'Cancel upload' %}</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>{% trans 'Delete' %}</span>
</button>
<input type="checkbox" class="toggle">
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The loading indicator is shown during file processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
{% verbatim %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">
<!--<label>{%=locale.fileupload.titleLabel%}</label>-->
<input type="text" name="title" placeholder="{%=locale.fileupload.titleLabel%}"/>
{% if (!o.options.autoUpload) { %}
<button style="display: none";>
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-warning-sign icon-white"></i>
<span>{%=locale.fileupload.cancel%}</span>
</button>
{% } %}</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
</script>
{% endverbatim %}
<script type="text/javascript">
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
formData: [{ name: "csrfmiddlewaretoken", value: "{{ csrf_token }}"}],
limitConcurrentUploads: {{ limitconcurrentuploads }}
}).bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
if (inputs.filter('[required][value=""]').first().focus().length) {
return false;
}
data.formData = inputs.serializeArray();
}).bind('fileuploaddestroy', function (e, data) {
$.post(data.url, {});
});
});
window.locale = {
"fileupload": {
"errors": {
"maxFileSize": "{% trans 'File is too big' %}",
"minFileSize": "{% trans 'File is too small' %}",
"acceptFileTypes": "{% trans 'Filetype not allowed' %}",
"maxNumberOfFiles": "{% trans 'Max number of files exceeded' %}",
"uploadedBytes": "{% trans 'Uploaded bytes exceed file size' %}",
"emptyResult": "{% trans 'Empty file upload result' %}"
},
"error": "{% trans 'Error' %}",
"start": "{% trans 'Start' %}",
"cancel": "{% trans 'Cancel' %}",
"destroy": "{% trans 'Delete' %}",
"titleLabel": "{% trans 'Title' %}"
}
};
</script>
{% endblock %}