Skip to content

Commit 7709151

Browse files
committed
csrf update - works for me
1 parent 72698a7 commit 7709151

File tree

3 files changed

+120
-1
lines changed

3 files changed

+120
-1
lines changed
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
//Source https://github.com/miki725/Django-jQuery-File-Uploader-Integration-demo/blob/master/static/js/jquery_fix_csrf.js
2+
3+
// jQuery alteration which send CSRF token on each ajax request in order to pass Django CSRF
4+
$(document).ajaxSend(function(event, xhr, settings) {
5+
function getCookie(name) {
6+
var cookieValue = null;
7+
if (document.cookie && document.cookie != '') {
8+
var cookies = document.cookie.split(';');
9+
for (var i = 0; i < cookies.length; i++) {
10+
var cookie = jQuery.trim(cookies[i]);
11+
// Does this cookie string begin with the name we want?
12+
if (cookie.substring(0, name.length + 1) == (name + '=')) {
13+
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
14+
break;
15+
}
16+
}
17+
}
18+
return cookieValue;
19+
}
20+
21+
function sameOrigin(url) {
22+
// url could be relative or scheme relative or absolute
23+
var host = document.location.host; // host + port
24+
var protocol = document.location.protocol;
25+
var sr_origin = '//' + host;
26+
var origin = protocol + sr_origin;
27+
// Allow absolute or scheme relative URLs to same origin
28+
return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
29+
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
30+
// or any other URL that isn't scheme relative or absolute i.e relative.
31+
!(/^(\/\/|http:|https:).*/.test(url));
32+
}
33+
34+
function safeMethod(method) {
35+
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
36+
}
37+
38+
if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
39+
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
40+
}
41+
});

fileupload/static/js/main.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,25 @@ $(function () {
1616
'use strict';
1717

1818
// Initialize the jQuery File Upload widget:
19-
$('#fileupload').fileupload();
19+
// $('#fileupload').fileupload();
20+
$('#fileupload').fileupload(
21+
'option',
22+
{
23+
// url: '/path/to/upload/handler.json',
24+
// sequentialUploads: true
25+
autoUpload: true,
26+
// this formData is neccessary to pass the csrf and pass uid to django
27+
formData: [
28+
{ name: "csrfmiddlewaretoken", value: "{{ csrf_token }}"}
29+
]
30+
}
31+
);
32+
33+
$('#fileupload').fileupload({
34+
add: function (e, data) {
35+
data.submit();
36+
}
37+
});
2038

2139
// Enable iframe cross-domain access via redirect option:
2240
$('#fileupload').fileupload(
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
from django import template
2+
3+
register = template.Library()
4+
5+
@register.simple_tag
6+
def upload_js():
7+
return """
8+
<!-- The template to display files available for upload -->
9+
<script id="template-upload" type="text/x-tmpl">
10+
{% for (var i=0, file; file=o.files[i]; i++) { %}
11+
<tr class="template-upload fade">
12+
<td class="preview"><span class="fade"></span><span>{%=file.name%}</span></td>
13+
{% if (file.error) { %}
14+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
15+
{% } else if (o.files.valid && !i) { %}
16+
<td>
17+
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
18+
</td>
19+
<td class="start">{% if (!o.options.autoUpload) { %}
20+
<i class="icon-upload icon-white"></i>
21+
<span>{%=locale.fileupload.start%}</span>
22+
{% } %}</td>
23+
{% } else { %}
24+
<td colspan="2"></td>
25+
{% } %}
26+
<td class="cancel">{% if (!i) { %}
27+
<i class="icon-ban-circle"></i>
28+
<span>{%=locale.fileupload.cancel%}</span>
29+
{% } %}</td>
30+
</tr>
31+
{% } %}
32+
</script>
33+
<!-- The template to display files available for download -->
34+
<script id="template-download" type="text/x-tmpl">
35+
{% for (var i=0, file; file=o.files[i]; i++) { %}
36+
<tr class="template-download fade">
37+
{% if (file.error) { %}
38+
<td class="name"><span>{%=file.name%}</span></td>
39+
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
40+
{% } else { %}
41+
<td class="preview">{% if (file.thumbnail_url) { %}
42+
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
43+
{% } %}</td>
44+
<td class="name">
45+
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}"></a>
46+
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}"></a>
47+
</td>
48+
<td colspan="2"></td>
49+
{% } %}
50+
<td class="delete">
51+
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
52+
<i class="icon-trash icon-white"></i>
53+
<span>{%=locale.fileupload.destroy%}</span>
54+
</button>
55+
<input type="checkbox" name="delete" value="1">
56+
</td>
57+
</tr>
58+
{% } %}
59+
</script>
60+
"""

0 commit comments

Comments
 (0)