-
-
Save penpenps/5350155f074d85bb1f24 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" > | |
<title>XMLHttpRequest send file demo</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!--set Document Mode to IE=edge --> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<!-- Le styles --> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div id="driver-uploader-detail" style='width:500px; margin:0 auto;'> | |
<div class='page-header'><h2>XMLHttpRequest send file demo</h2></div> | |
<input id="driver-uploader-path" type="file" class="filestyle" data-icon="true" data-buttonText="Browse" name="driver_file"> | |
| |
<span id="driver-uploader-success-alert" class='text-success' style="display:none">Success!</span> | |
<span id="driver-uploader-failure-alert" class='text-danger' style="display:none">Failed!</span> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
<script type="text/javascript"> | |
$(document).ready(function(){ | |
$('#driver-uploader-path').change(function(){ | |
var file = this.files[0]; | |
filename = ''; | |
if('name' in file) | |
filename= file.name; | |
else | |
filename = file.fileName; | |
var xhr = new XMLHttpRequest(); | |
(xhr.upload || xhr).addEventListener('progress', function(e) { | |
var done = e.position || e.loaded | |
var total = e.totalSize || e.total; | |
console.log('xhr progress: ' + Math.round(done/total*100) + '%'); | |
}); | |
xhr.addEventListener('load', function(e) { | |
data = JSON.parse(this.responseText); | |
if(this.status != 200){ | |
$('#driver-uploader-failure-alert').show(); | |
return; | |
} | |
$('#driver_source').val('Flat file on idisas'); | |
$('#driver_name').val(data['file_remote_path']).blur(); | |
$('#driver-uploader-success-alert').show(); | |
}); | |
xhr.open('post', '/your-sever-url', true); | |
var fd = new FormData(); | |
fd.append("filename", filename); | |
fd.append("drive_file", file); | |
xhr.send(fd); | |
}); | |
}); | |
</script> | |
</body> | |
</html> | |
def upload_driver(request): | |
upload_file = request.FILES['drive_file'] | |
ret = {} | |
if upload_file: | |
target_folder = settings.PULL_DRIVER_UPLOAD_PATH | |
if not os.path.exists(target_folder): os.mkdir(target_folder) | |
rtime = str(int(time.time())) | |
filename = request.POST['filename'] | |
target = os.path.join(target_folder, filename) | |
with open(target, 'wb+') as dest: | |
for c in upload_file.chunks(): | |
dest.write(c) | |
ret['file_remote_path'] = target | |
else: | |
return HttpResponse(status=500) | |
return HttpResponse(json.dumps(ret), mimetype = "application/json") |
it's giving csrf token error, although I've included it {% csrf_token %} in HTML file
it's giving csrf token error, although I've included it {% csrf_token %} in HTML file
Did you get a fix for this?
yes
I'm handling the upload like this: the first user chooses or drops the file to upload then javascript will convert it into form data then javascript will send it to the views and in javascript, I did this to overcome that csrf error
// using jQuery
const csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
xmlhttp.open('post', o.options.processor);
xmlhttp.setRequestHeader("X-CSRFToken", csrftoken);
xmlhttp.send(data);
It's a good example, but be aware that the python code is vulnerable to path manipulation. If you post "filename" with "../"'s it's possible to override any which file the process running the django service has access to. e.g.: "../../../../../root/.ssh/id_ed25519"
Thanks a lot for the example, I've past the last week trying to figure this out, and wasted a lot of time trying to receive a base64 file and converting it to bytes and a whole bunch of stuff that didn't work, your solution helped me greatly!