Skip to content

Commit 9d4ef2e

Browse files
ET-CSET-CS
committed
Basic Plus 8.8.2 added
1 parent afdd516 commit 9d4ef2e

File tree

5 files changed

+231
-4
lines changed

5 files changed

+231
-4
lines changed

‎fileupload/templates/fileupload/picture_basic_form.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h1>Django jQuery File Upload Demo</h1>
3939
<h2 class="lead">Basic version</h2>
4040
<ul class="nav nav-tabs">
4141
<li class="active"><a href="/upload/basic">Basic</a></li>
42-
<li><a href="basic-plus.html" style="display:none;">Basic Plus</a></li>
42+
<li><a href="/upload/basic/plus">Basic Plus</a></li>
4343
<li><a href="/upload/new">Basic Plus UI</a></li>
4444
<li><a href="angularjs.html" style="display:none;">AngularJS</a></li>
4545
<li><a href="jquery-ui.html" style="display:none;">jQuery UI</a></li>

‎fileupload/templates/fileupload/picture_basicplus_form.html

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
<head>
4+
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
5+
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
6+
<meta charset="utf-8">
7+
<title>jQuery File Upload Demo - Basic Plus version</title>
8+
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<!-- Bootstrap styles -->
11+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
12+
<!-- Generic page styles -->
13+
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
14+
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
15+
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.fileupload-ui.css">
16+
</head>
17+
<body>
18+
<div class="navbar navbar-default navbar-fixed-top">
19+
<div class="container">
20+
<div class="navbar-header">
21+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
22+
<span class="icon-bar"></span>
23+
<span class="icon-bar"></span>
24+
<span class="icon-bar"></span>
25+
</button>
26+
<a class="navbar-brand" href="https://github.com/sigurdga/django-jquery-file-upload">Django jQuery File Upload</a>
27+
</div>
28+
<div class="navbar-collapse collapse">
29+
<ul class="nav navbar-nav">
30+
<li class="active"><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Demo</a></li>
31+
<li><a href="https://github.com/sigurdga/django-jquery-file-upload">Source Code</a></li>
32+
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="container">
38+
<h1>Django jQuery File Upload Demo</h1>
39+
<h2 class="lead">Basic Plus version</h2>
40+
<ul class="nav nav-tabs">
41+
<li><a href="/upload/basic">Basic</a></li>
42+
<li class="active"><a href="/upload/basic/plus">Basic Plus</a></li>
43+
<li><a href="/upload/new">Basic Plus UI</a></li>
44+
<li><a href="angularjs.html" style="display:none;">AngularJS</a></li>
45+
<li><a href="jquery-ui.html" style="display:none;">jQuery UI</a></li>
46+
</ul>
47+
<br>
48+
<blockquote>
49+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
50+
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
51+
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
52+
</blockquote>
53+
<br>
54+
<!-- The fileinput-button span is used to style the file input field as button -->
55+
<span class="btn btn-success fileinput-button">
56+
<i class="glyphicon glyphicon-plus"></i>
57+
<span>Add files...</span>
58+
<!-- The file input field used as target for the file upload widget -->
59+
<input id="fileupload" type="file" name="file" multiple>
60+
</span>
61+
<br>
62+
<br>
63+
<!-- The global progress bar -->
64+
<div id="progress" class="progress">
65+
<div class="progress-bar progress-bar-success"></div>
66+
</div>
67+
<!-- The container for the uploaded files -->
68+
<div id="files" class="files"></div>
69+
<br>
70+
<div class="panel panel-default">
71+
<div class="panel-heading">
72+
<h3 class="panel-title">Demo Notes</h3>
73+
</div>
74+
<div class="panel-body">
75+
<ul>
76+
<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
77+
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
78+
<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
79+
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
80+
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
81+
<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
82+
</ul>
83+
</div>
84+
</div>
85+
</div>
86+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
87+
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
88+
<script src="{{ STATIC_URL }}js/vendor/jquery.ui.widget.js"></script>
89+
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
90+
<script src="{{ STATIC_URL }}js/load-image.min.js"></script>
91+
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
92+
<script src="{{ STATIC_URL }}js/canvas-to-blob.min.js"></script>
93+
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
94+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
95+
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
96+
<script src="{{ STATIC_URL }}js/jquery.iframe-transport.js"></script>
97+
<!-- The basic File Upload plugin -->
98+
<script src="{{ STATIC_URL }}js/jquery.fileupload.js"></script>
99+
<!-- The File Upload processing plugin -->
100+
<script src="{{ STATIC_URL }}js/jquery.fileupload-process.js"></script>
101+
<!-- The File Upload image preview & resize plugin -->
102+
<script src="{{ STATIC_URL }}js/jquery.fileupload-image.js"></script>
103+
<!-- The File Upload audio preview plugin -->
104+
<script src="{{ STATIC_URL }}js/jquery.fileupload-audio.js"></script>
105+
<!-- The File Upload video preview plugin -->
106+
<script src="{{ STATIC_URL }}js/jquery.fileupload-video.js"></script>
107+
<!-- The File Upload validation plugin -->
108+
<script src="{{ STATIC_URL }}js/jquery.fileupload-validate.js"></script>
109+
<script src="{{ STATIC_URL }}js/jquery.cookie.js"></script>
110+
<script>
111+
/*jslint unparam: true, regexp: true */
112+
/*global window, $ */
113+
function csrfSafeMethod(method) {
114+
// these HTTP methods do not require CSRF protection
115+
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
116+
}
117+
$(function () {
118+
'use strict';
119+
var csrftoken = $.cookie('csrftoken');
120+
// Change this to the location of your server-side upload handler:
121+
var url = '/upload/basic/plus/',
122+
uploadButton = $('<button/>')
123+
.addClass('btn btn-primary')
124+
.prop('disabled', true)
125+
.text('Processing...')
126+
.on('click', function () {
127+
var $this = $(this),
128+
data = $this.data();
129+
$this
130+
.off('click')
131+
.text('Abort')
132+
.on('click', function () {
133+
$this.remove();
134+
data.abort();
135+
});
136+
data.submit().always(function () {
137+
$this.remove();
138+
});
139+
});
140+
$('#fileupload').fileupload({
141+
url: url,
142+
crossDomain: false,
143+
beforeSend: function(xhr, settings) {
144+
if (!csrfSafeMethod(settings.type)) {
145+
xhr.setRequestHeader("X-CSRFToken", csrftoken);
146+
}
147+
},
148+
dataType: 'json',
149+
autoUpload: false,
150+
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
151+
maxFileSize: 5000000, // 5 MB
152+
// Enable image resizing, except for Android and Opera,
153+
// which actually support image resizing, but fail to
154+
// send Blob objects via XHR requests:
155+
disableImageResize: /Android(?!.*Chrome)|Opera/
156+
.test(window.navigator.userAgent),
157+
previewMaxWidth: 100,
158+
previewMaxHeight: 100,
159+
previewCrop: true
160+
}).on('fileuploadadd', function (e, data) {
161+
data.context = $('<div/>').appendTo('#files');
162+
$.each(data.files, function (index, file) {
163+
var node = $('<p/>')
164+
.append($('<span/>').text(file.name));
165+
if (!index) {
166+
node
167+
.append('<br>')
168+
.append(uploadButton.clone(true).data(data));
169+
}
170+
node.appendTo(data.context);
171+
});
172+
}).on('fileuploadprocessalways', function (e, data) {
173+
var index = data.index,
174+
file = data.files[index],
175+
node = $(data.context.children()[index]);
176+
if (file.preview) {
177+
node
178+
.prepend('<br>')
179+
.prepend(file.preview);
180+
}
181+
if (file.error) {
182+
node
183+
.append('<br>')
184+
.append(file.error);
185+
}
186+
if (index + 1 === data.files.length) {
187+
data.context.find('button')
188+
.text('Upload')
189+
.prop('disabled', !!data.files.error);
190+
}
191+
}).on('fileuploadprogressall', function (e, data) {
192+
var progress = parseInt(data.loaded / data.total * 100, 10);
193+
$('#progress .progress-bar').css(
194+
'width',
195+
progress + '%'
196+
);
197+
}).on('fileuploaddone', function (e, data) {
198+
$.each(data.result.files, function (index, file) {
199+
var link = $('<a>')
200+
.attr('target', '_blank')
201+
.prop('href', file.url);
202+
$(data.context.children()[index])
203+
.wrap(link);
204+
});
205+
}).on('fileuploadfail', function (e, data) {
206+
$.each(data.result.files, function (index, file) {
207+
var error = $('<span/>').text(file.error);
208+
$(data.context.children()[index])
209+
.append('<br>')
210+
.append(error);
211+
});
212+
}).prop('disabled', !$.support.fileInput)
213+
.parent().addClass($.support.fileInput ? undefined : 'disabled');
214+
});
215+
</script>
216+
</body>
217+
</html>
218+
219+
220+
221+
222+
223+

‎fileupload/templates/fileupload/picture_form.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h1>Django jQuery File Upload Demo</h1>
77
<h2 class="lead">Basic Plus UI version</h2>
88
<ul class="nav nav-tabs">
99
<li><a href="/upload/basic">Basic</a></li>
10-
<li><a href="basic-plus.html" style="display:none;">Basic Plus</a></li>
10+
<li><a href="/upload/basic/plus">Basic Plus</a></li>
1111
<li class="active"><a href="/upload/new/">Basic Plus UI</a></li>
1212
<li><a href="angularjs.html" style="display:none;">AngularJS</a></li>
1313
<li><a href="jquery-ui.html" style="display:none;">jQuery UI</a></li>

‎fileupload/urls.py

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
from django.conf.urls import patterns, url
2-
from fileupload.views import BasicVersionCreateView, PictureCreateView, PictureDeleteView
2+
from fileupload.views import BasicVersionCreateView, BasicPlusVersionCreateView, PictureCreateView, PictureDeleteView
33

44
urlpatterns = patterns('',
55
(r'^basic/$', BasicVersionCreateView.as_view(), {}, 'upload-basic'),
6+
(r'^basic/plus/$', BasicPlusVersionCreateView.as_view(), {}, 'upload-basic-plus'),
67
(r'^new/$', PictureCreateView.as_view(), {}, 'upload-new'),
78
(r'^delete/(?P<pk>\d+)$', PictureDeleteView.as_view(), {}, 'upload-delete'),
89
url(r'^view/$', 'fileupload.views.PictureListView', name='upload-view'),

‎fileupload/views.py

+4-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ def form_valid(self, form):
4343

4444
class BasicVersionCreateView(PictureCreateView):
4545
template_name_suffix = '_basic_form'
46-
46+
47+
class BasicPlusVersionCreateView(PictureCreateView):
48+
template_name_suffix = '_basicplus_form'
49+
4750
class PictureDeleteView(DeleteView):
4851
model = Picture
4952

0 commit comments

Comments
 (0)