forked from wagtail/wagtail
-
Notifications
You must be signed in to change notification settings - Fork 1
/
add.html
110 lines (97 loc) · 4.9 KB
/
add.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
{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% load l10n %}
{% load static %}
{% load wagtailimages_tags %}
{% block titletag %}{% trans "Add multiple images" %}{% endblock %}
{% block extra_css %}
{{ block.super }}
{{ form_media.css }}
<link rel="stylesheet" href="{% static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
{% endblock %}
{% block content %}
{% trans "Add images" as add_str %}
{% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
<div class="nice-padding">
<div class="drop-zone">
<p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
<p>{{ help_text }}</p>
<form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
<div class="replace-file-input">
<button class="button bicolor icon icon-plus">{% trans "Or choose from your computer" %}</button>
<input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages:add_multiple' %}" multiple>
</div>
{% csrf_token %}
{% if collections %}
<div class="field">
<label for="id_addimage_collection">{% trans "Add to collection:" %}</label>
<div class="field-content">
<select id="id_addimage_collection" name="collection">
{% for collection in collections %}
<option value="{{ collection.id|unlocalize }}">{{ collection.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
</form>
</div>
<div id="overall-progress" class="progress progress-secondary">
<div class="bar" style="width: 0%;">0%</div>
</div>
<ul id="upload-list" class="upload-list multiple"></ul>
</div>
<script id="upload-list-item" type="text/template">
<li class="row">
<div class="left col3">
<div class="preview">
<div class="thumb icon icon-image"></div>
<div class="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
<div class="right col9">
<p class="status-msg success">{% trans "Upload successful. Please update this image with a more appropriate title, if necessary. You may also delete the image completely if the upload wasn't required." %}</p>
<p class="status-msg failure">{% trans "Sorry, upload failed." %}</p>
<p class="status-msg server-error">
<strong>{% trans "Server Error" %}</strong>
{% trans "Report this error to your webmaster with the following information:"%}
<br /><span class="error-text"></span> - <span class="error-code"></span>
</p>
<p class="status-msg update-success">{% trans "Image updated." %}</p>
<p class="status-msg failure error_messages"></p>
</div>
</li>
</script>
{% endblock %}
{% block extra_js %}
{{ block.super }}
{{ form_media.js }}
<!-- this exact order of plugins is vital -->
<script src="{% static 'wagtailimages/js/vendor/load-image.min.js' %}"></script>
<script src="{% static 'wagtailimages/js/vendor/canvas-to-blob.min.js' %}"></script>
<script src="{% static 'wagtailadmin/js/vendor/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'wagtailadmin/js/vendor/jquery.fileupload.js' %}"></script>
<script src="{% static 'wagtailadmin/js/vendor/jquery.fileupload-process.js' %}"></script>
<script src="{% static 'wagtailimages/js/vendor/jquery.fileupload-image.js' %}"></script>
<script src="{% static 'wagtailimages/js/vendor/jquery.fileupload-validate.js' %}"></script>
<script src="{% static 'wagtailadmin/js/vendor/tag-it.js' %}"></script>
<!-- Main script -->
<script src="{% static 'wagtailimages/js/add-multiple.js' %}"></script>
{% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
<script>
window.fileupload_opts = {
simple_upload_url: "{% url 'wagtailimages:add' %}",
accepted_file_types: /\.({{ allowed_extensions|join:"|" }})$/i, //must be regex
max_file_size: {{ max_filesize|stringformat:"s"|default:"null" }}, //numeric format
errormessages: {
max_file_size: "{{ error_max_file_size }}",
accepted_file_types: "{{ error_accepted_file_types }}"
}
}
window.tagit_opts = {
autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
};
</script>
{% endblock %}