I don't understand why but if I try to upload file via ajax it does not work but with regular request it does.
Printed the request.FILES.
#For ajax request
<MultiValueDict: {}>
#For regular request
<MultiValueDict: {u'file': [<TemporaryUploadedFile: IMG_3056.JPG (image/jpeg)>]}>
#Here's my front-end and back-end code
<form action="" method="post" enctype="multipart/form-data">{% csrf_token %}
...
</form>
function submitForm(target, form){
$.ajax({
url:form.attr('action'),
type:'post',
data:form.serialize(),
dataType:"html",
error:function(data, status, xhr){
error();
},
beforeSend:function(){
loading();
},
success:function(data, status, xhr){
$(target).html(data);
},
complete:function(){
loadingDone();
}
});
}
#views.py
def file_upload(request):
doc_form = DocumentForm(user = request.user)
if request.method == 'POST':
doc_form = DocumentForm(request.POST, request.FILES, user = request.user)
print request.FILES
if doc_form.is_valid():
document = doc_form.save()
return render_to_response("create_doc.html", { 'doc_form':doc_form,
}, context_instance = template.RequestContext(request))
Uploading files with regular jQuery's AJAX does not work. See some of these links for help:
http://www.nickdesteffen.com/blog/file-uploading-over-ajax-using-html5
How can I upload files asynchronously?
Sending multipart/formdata with jQuery.ajax
Basically there is a new API in HTML 5 for dealing with files or the old school way is using an iFrame/Flash. Personally I used Uploadify on a project a couple of months ago.
Please try using this jquery form submit plugin, I think it will manage to send the FILE to the server like you need.
(It works for me for a PHP server side, no reason why it wont work for you too)
Related
I'm trying to test the following view
def generate_exercise_edl(request, ex_pk, unit_pk, *args, **kwargs):
ex_instance = Exercises.objects.get(id=ex_pk)
unit_instance = Units.objects.get(id=unit_pk)
unit_edl = UnitEdl.objects.filter(unit=unit_instance)
locations = Locations.objects.all()
unit_edl = list(unit_edl)
print(request)
print(request.POST)
print(request.user)
if request.method == "POST":
for item in unit_edl:
ExerciseEdl.objects.update_or_create(unit=unit_instance, exercise=ex_instance, equipment=item.equipment,
quantity=item.quantity, location=Locations.objects.get(location="Okinawa"))
print(request)
return redirect('exercise-equipment', ex_pk=ex_pk, unit_pk=unit_pk)
else:
messages.error(
request, f'Failed to add/update the {unit_instance.unit_name} edl for {ex_instance.exercise}.')
context = {
'ex_instance': ex_instance,
'unit_instance': unit_instance,
'unit_edl': unit_edl,
'locations': locations,
}
return render(request, 'exercise/exercise_edl.html', context)
This is my test code
def test_generate_edl(self):
unit_edl = UnitEdl.objects.filter(unit=unit.pk)
for edl in unit_edl:
ExerciseEdl.objects.update_or_create(
unit=unit,
exercise=ex,
equipment=edl.equipment,
quantity=edl.quantity,
location=loc
)
response = self.client.post(
f'/exercise/{ex.pk}/edl/{unit.pk}/convert/')
ex_edl = ExerciseEdl.objects.all().count()
self.assertEquals(ex_edl, 2)
self.assertEqual(response.status_code, 302)
This is the URL for the view
path('exercise/<int:ex_pk>/edl/<int:unit_pk>/convert', views.generate_exercise_edl, name='generate-edl'),
And the part of the template that calls my function
<form action="{% url 'generate-edl' ex_pk=ex_instance.id unit_pk=unit_instance.id %}" method="post">
{% csrf_token %}
<input class="btn btn-primary btn-sm mt-2" type="submit" value="Generate EDL">
</form>
My test returns 404, not 302, but the function on the site works, and redirects you.
f'/exercise/{ex.pk}/edl/{unit.pk}/convert/' isn't mapped to any template, it's just the url for the function. In the past my tests have returned a status code of 404 when I wrote the post data incorrectly.
print(request.POST) returns:
<QueryDict: {'csrfmiddlewaretoken':
['ZYT0dgMZqqgmCo2OufdI9B0hIJ5k5qPKcxnkReWPZy0iY9McaBO7MHENjYLzH66O']}>
Which makes sense because I'm not sending any post data, just the csrf token.
What I want to know is, am I on the right track with using 'response = self.client.post(
f'/exercise/{ex.pk}/edl/{unit.pk}/convert/')'?
With my other tests I include the post data in a dictionary along with the URL, but this function doesn't use any, so I just ran a similar function.
Is there a better way to test this? Should I just refactor?
You need to use reverse to build your URL rather than hard coding it. Since you hard coded it, it is getting a 404 since the URL the test tried to post to is incorrect.
I don't know the app_name in your URLs file, you will need to add that to the reverse. For example if it was excercise it would be exercise:generate-edl.
from django.urls import reverse
response = self.client.post(reverse(
'<app_name>:generate-edl',
kwargs={
ex_pk: ex.pk,
unit_pk: unit.pk,
}
))
Hi I would really appreciate if somebody could please paste there code here for there Facebook login created for their Django project, whether it is a separate app or not, with a couple of explanations. Pulling User Name, Email and profile pic. Thank you
It took me a week but I have implemented Facebook login the hard way. If you don't want a 3rd party app on your site (more secure and trustworthy for users) here are the steps:
Get the FB login button here: (https://developers.facebook.com/docs/facebook-login/web/login-button). You can change the settings of the button before you copy the code.
Get the javascript plugin here (https://developers.facebook.com/docs/facebook-login/web). I suggest copying the example and modifying the following:
Javascript:
if (response.status === 'connected') {
// Logged into your app and Facebook.
FB.api('/me', {fields: 'name, email'}, function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById("your_name2").value = response.name;
document.getElementById("your_email").value = response.email;
document.getElementById("myForm").submit();
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + response.email + '!';});
Once logged in and 'connected' you need to change the info you call. Add the {fields...} you require above. Keep the log to see if it's working.
Submit the info pulled in 2 into a hidden form in order to send it to a view and model. Here is the form (hellls just default value):
Form template:
<form action="{% url 'facebooklogin:register' %}" method="post" style="display: none;" id="myForm">
{% csrf_token %}
<label for="your_name">Your name: </label>
<input id="your_name2" type="text" name="your_name" value="helllllls">
<input id="your_email" type="text" name="your_email" value="helllllls">
<input type="submit" value="OK">
</form>
Set up your form, model and view to handle the information as you want. Get profile pic but simply adding an ImageField to form.
URL:
url(r'^registerfb/$', views.get_name, name='register')
VIEW:
def get_name(request):
# if this is a POST request we need to process the form data
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# process the data in form.cleaned_data as required
logger.error('Form is valid and running')
logger.error(request.POST.get('your_name'))
logger.error(request.POST.get('your_email'))
# redirect to a new URL:
return HttpResponseRedirect('/thanks/')
# if a GET (or any other method) we'll create a blank form
else:
form = NameForm()
return render(request, 'facebooklogin/name.html', {'form': form})
FORM:
class NameForm(ModelForm):
class Meta:
model = FBUser
fields = ['your_name', 'your_email',]
I'm trying to build client/server system as follows: server is django REST with some database, client is static HTML/CSS/JS built as separate django project.
I've got stuck with a basic user authentication scheme processed via simple login form on client side. My idea was to go for token authentication, token to be stored in client's localStorage - so that's why I've taken approach to handle the form submit and POST for token to server by JS.
The issue is I cannot get the token from server to client due to Forbidden (CSRF cookie not set.): /getToken/ error on the server side. Spent tons of time on it and I cannot find answer why CSRF cookie is not set as I enforce at least 4 mechanisms forcing the cookie set: 1) {% csrf_token %}, 2) manual setting of cookie header, 3) #ensure_csrf_cookie, 4) removing 'django.middleware.csrf.CsrfViewMiddleware', from MIDDLEWARE_CLASSES in server settings.py ...
Here are the details:
The client part looks as follows:
login.html form:
<form name="login" method="POST">
{% csrf_token %}
Username<input type="text" name="uname"/>
Password<input type="password" name="psswd"/>
<input type="button" onclick="do_login(this.form)" value="Login"/>
<input type="reset" value="Reset"/>
</form>
where do_login() is in the script below. Pls mind the {% csrf_token %} is included ...
login_script.js :
function do_login(form) {
var csrftoken = getCookie('csrftoken');
uname = form.uname.value;
psswd = form.psswd.value;
var req = new XMLHttpRequest();
var url = "http://localhost:8000/getToken/";
var params = JSON.stringify({ username: uname, password: psswd });
req.open("POST", url, true);
req.setRequestHeader("X-CSRFToken", csrftoken);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if(req.readyState == XMLHttpRequest.DONE && req.status == 200) {
alert(http.responseText);
}
}
req.send(params);}
where getCookie is a copy&paste function from django tutorial (it seems to return some cookie, so I assume it's correct)
views.py:
#ensure_csrf_cookie
def user_login(request):
return render(request, 'login.html', {})enter code here
I put #ensure_csrf_cookie to force the cookie input but with no success ...
On the server side I have a view
#require_POST
def getToken(request):
serializer = AuthTokenSerializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.validated_data['user']
token, created = Token.objects.get_or_create(user=user)
response = HttpResponse({'token': token.key}, content_type="application/json")
response["Access-Control-Allow-Origin"] = "*"
return response
which is basically the slightly redefined django's built-in obtain_auth_token (as I couldn't overcome CORS issue in any other way round)
I'm trying to upload multiple files in one request using dropzone.js. When I set the uploadMultiple option to true in dropzone, one request containing both files is sent to my view, but form validation fails.
Here is my Django form:
class UploadForm(forms.Form):
data = forms.IntegerField(widget=forms.HiddenInput())
file = forms.FileField()
My view:
def upload(request):
if request.method == 'POST':
form = UploadForm(request.POST, request.FILES)
print request.FILES
if form.is_valid():
for file in request.FILES.getlist('file'):
print str(file)
else:
print form.errors
else:
form = UploadForm(initial={'data': 5})
return render(request, 'upload.html', {
'form': form
})
and my template:
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue : false,
uploadMultiple: true,
init : function() {
myDropzone = this;
this.element.querySelector("input[type='submit']").addEventListener('click', function(event) {
event.preventDefault();
event.stopPropagation();
myDropzone.processQueue();
});
}
}
</script>
<form id='my-awesome-dropzone' class="dropzone"
action="{% url 'upload.views.upload' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.data }}
<input type="submit" value="Upload" />
</form>
I see that request.FILES has two files:
<MultiValueDict: {u'file[]': [<InMemoryUploadedFile: Forest Flowers.jpg (image/jpeg)>,
<InMemoryUploadedFile: Forest.jpg (image/jpeg)>]}>
I guess the issue is Django doesn't recognize file[]. It expects file instead. How can I get Django to recognize the two uploads?
You are right assuming that the validation error is originated because of the input name dropzone.js sends to the server. The "file[n]" pattern when your Django form is expecting a field named "file" throws a validation error (required field).
In Dropzone.js you can specify the parameter "paramName" and this object property also accepts a function instead of a simple string, so if you set your paramName to something like:
...
paramName: function(){
return "file";
}
...
the name of the field sent to server doesn't change and you get a "file" field in request.FILES that is a dict with one element (file) that is an array of files as it is expected.
You just need to do:
file1 = request.FILES.get(file[][0], None) # For the first file
file2 = request.FILES.get(file[][1], None) # For the second file
... and so on...
Hope that helps.
I am using django 1.5, python 2.7 and jquery 1.9. I have a form which has precisely 2 fields i.e. title and document. When I press submit I want the users chosen document to be present in the request.FILES as shown in the view.
When I submit the regular form (without ajax), this works fine, but with ajax I do not get the file field in my request. Any suggestions on how to upload a file using ajax.
HTML:
<form enctype="multipart/form-data" action="{% url 'upload_document' %}" method="post" id="uploadForm">
{% csrf_token %}
<ul>
<li>
<div>Title</div>
<input id="title" type="text" maxlength="200"/>
<div class="error"></div>
</li>
<li>
<div>Upload File</div>
<input id="document" type="file" size="15" />
<div class="error"></div>
</li>
</ul>
<input type="submit" value="submit"/></p>
</form>
FORMS.PY:
class UploadForm( forms.Form ):
document = forms.FileField()
title = forms.CharField(max_length = 200)
def clean(self):
cleaned_data = super(UploadForm, self).clean()
return cleaned_data
def save(self, *args, **kwargs):
title = self.cleaned_data['title']
doc = self.cleaned_data['document']
document = Document(title = title, document = doc)
document.save()
return document
SCRIPT:
<script type="text/javascript">
$("#uploadForm").submit(function(event){
event.preventDefault();
$.ajax({
url : "{% url 'upload_document' %}",
type: "POST",
data : {csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
title: document.getElementById('title').value,
//document: document: document.getElementById('document'),
},
dataType : "json",
success: function( response ){
if(response == "True"){
// success
}
else {
//append errors
}
}
});
});
</script>
VIEWs.PY
def upload_document(request):
print request.POST
print request.FILES
if request.is_ajax():
if request.method == 'POST':
form = UploadForm(request.POST, request.FILES, user = request.user)
if form.is_valid():
form.save()
return HttpResponse(simplejson.dumps('True'), mimetype = 'application/json' )
else:
errors = form.errors
return HttpResponse(simplejson.dumps(errors), mimetype = 'application/json' )
The answer to that question is not that simple. First of all if you intend to support old browsers then indeed it gets nasty. You have to deal with hidden iframes and some JavaScript tricks. I do advice using some well-known scripts for that like jQuery-File-Upload.
But the world is evolving and new technologies arise including HTML5. There's a new File API which is available in most modern browsers ( IE10+, FireFox3.6+, Chrome13+, see: http://caniuse.com/fileapi ) which can be used for that. First you need some HTML:
<input type="file" id="file-select" />
Then you can bind to (for example) change event:
$('#file-select').change( handleFileSelect );
and finally the handler itself:
var data = {};
function createReaderHandler(name) {
return function(ev) {
data[name] = ev.target.result;
};
}
function handleFileSelect(ev) {
var files = ev.target.files; // FileList object
// Loop through the FileList
for (var i = 0; i < files.length; i++) {
var file = files[i],
name = file.name || file.fileName,
reader = new FileReader();
reader.onload = createReaderHandler(name);
reader.readAsText(file);
}
}
Once the data is loaded into JavaScript memory (note that the operation is asynchronous) you can send it via AJAX like any other data. There are more options: depending on your file you can read it as a binary data using .readAsBinaryString and so on. Google is your friend. :)
Also I think there already are good scripts for uploading files with a fallback to old methods. This one can be interesting (haven't tried it):
http://www.plupload.com/
I think the issue is in the submit button, change it into normal button
ie, <button type='button' id='submit'>submit</button>(by default all buttons in form are submit)
and the ajax as
$('#submit').on('click',function(){
frm = $(this).parents('form')
$.ajax({
type: frm.attr('method'),
dataType:'json',
url: frm.attr('action'),
data: frm.serialize(),
async: false,
success: function (data) {
console.log('success')
},
error: function(data) {
console.log("Something went wrong!");
}
})
All others will be same
Just try it will work