We Keep Coding

Django Rest Framework + Angular 2 - uploading multiple files

I'm using Django Rest Framework as my backend and Angular 2 for my frontend. I've got this page in Angular, where I create a form:
createResourcesForm() {
this.resourcesForm = this.formBuilder.group({
resources: this.formBuilder.array([
this.formBuilder.group({
title: ['', Validators.compose([Validators.required])],
file: ['', Validators.compose([])],
})
])
})
}
As you can see, the form consists of FormArray, where every element has two inputs: title and file - a text input and a file input respectively. On submitting the form I'm trying to send the data to Django but I get an error Missing filename. Request should include a Content-Disposition header with a filename parameter.. I could set it easily but I'm expecting to receive a list of {title, file}, so how to set multiple file names? Any other idea how I could do this?
The error in Django Rest Framework comes from parse method in FileUploadParser.
I'm not pasting any Python code here because it's a standard ListCreateAPIView, nothing special about it. Here is my serializer:
class ResourceCreateSerializer2(serializers.Serializer):
author_pk = serializers.IntegerField(required=False)
author_first_name = serializers.CharField(max_length=50, required=False)
author_last_name = serializers.CharField(max_length=50, required=False)
resources = ResourceWithoutAuthorSerializer(many=True)
class ResourceWithoutAuthorSerializer(serializers.ModelSerializer):
instruments = InstrumentSerializer(many=True)
class Meta:
model = MusicResource
fields = ['title', 'file', 'instruments']
Don't mind the other fields, they are being sent just fine (as the file does). One more thing to say - I'm adding a content-type header in Angular just before sending the data.
UPDATE 1
Here is my method for uploading files (Angular 2):
get value() {
let formData = new FormData();
for (let i = 0; i < this.resources.length; i++) {
let resource = this.resources.value[i];
let fileName = resource.file;
let fileInputs = $('input[type="file"]').filter(function () {
return this.value == fileName;
});
if (fileInputs.length == 0) {
return null;
}
let fileInput = <HTMLInputElement>fileInputs[0];
formData.append('resources-' + i + '-title', resource.title);
formData.append('resources-' + i + '-file', fileInput.files[0], fileInput.files[0].name);
for (let j = 0; j < this.instrumentsSelect.value.length; j++) {
formData.append('resources-' + i + '-instruments', this.instrumentsSelect.value[j]);
}
}
return formData;
}
then
this.musicResourcesService.addMusicResource(toSend).subscribe(
data => console.log('successfuly added resources'),
err => console.log('MusicResourcesAddComponent', 'onMusicResourceFormSubmit', err)
);
addMusicResource(data) {
let headers = new Headers({});
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = new RequestOptions({headers});
return this.api.post('resources/resources/list_create/', data, true, options);
}
public post(url: any, payload: any, noToken?, options?: any): Observable<any> {
const provider = noToken ? this.http : this.authHttp;
const fulLUrl = this.conf.getAPIUrl() + url;
return provider.post(fulLUrl, payload, options)
.delay(100)
.map(this.extractData)
.catch(this.handleError).share();
}

I did not like #Robert's answer and did not receive any other idea so after hours of reseraching it turns out that I was missing two things:
The parser should have been set to MultiPartParser, not FileUploadParser
There is no need to set the Content-Type header manually, it will get filled automatically along with the boundary which I was missing
Also, to make sure Django receives all the data and understands it, I had to change
formData.append('resources-' + i + '-title', resource.title);
and similar lines to
formData.append('resources[' + i + ']title', resource.title);

Django authorization when calling other view

I have a django system for building formsheets on refrigeration systems.
I have a model called System.
I have plenty of models which represent a form paper and many have :
a Foreign key to System called anlage
a Method called get_pdf_url which returns an url to the pdf generator for the instance
an Attribute CLASSNAME
This is the get method from the zip view :
def get(self, request, *args, **kwargs):
print('# AnlageZip GET NEU ###################################################################################################')
self.pk=self.kwargs.get('pk')
self.template_name = "stammdat/Anlage/info.html"
self.user=self.request.user
#
host=self.request.get_host()
try :
an=Anlage.objects.filter(user=self.request.user).get(pk=self.pk)
except ObjectDoesNotExist :
an=None
#
tfile=BytesIO()
zf = zipfile.ZipFile( tfile, "w" )
# Leere Liste erzeugen
AnlageFiles=[]
#
seq=1
x={}
x['Filename'] = '{:02d}_{}.pdf'.format(seq,an.CLASSNAME)
x['pdf_url'] = 'http://'+host+an.get_pdf_url()
x['data'] = urllib.request.urlopen( x['pdf_url'] )
#x['data1'] =
AnlageFiles.append(x)
print(x['Filename'],x['pdf_url'])
zf.writestr( x['Filename'],x['data'].read())
seq+=1
# Jetzt Dokumentation suchen
# Alle diese modelle benötigen einen foreign Key zu Anlage namens anlage
#
DokuModels = [KurzBetrAnleitA1, KurzBetrAnleitA3, KurzBetrAnleitNH3, UebernahmeUebergabeKurz,UebernahmeUebergabe,
SichDruckBegrenz,DruckFestPruef,AbnahmPruefDruckbeh,WiederPruefDruckbeh,AbnahmPruefRohr,WiederPruefRohr,
PruefListSicht,PruefBeschWK8901,Wartungsvertrag,Einbauerklaerung,
EGKonformErkl,Instandhaltungsvertrag,RisikoBeurteilung]
#
for doku in DokuModels :
docs=doku.objects.filter(anlage=an)
if len(docs) > 0 :
for item in docs :
x={}
x['Filename'] = '{:02d}_{}.pdf'.format(seq,item.CLASSNAME)
x['pdf_url'] = 'http://'+host+item.get_pdf_url()
x['data'] = urllib.request.urlopen( x['pdf_url'] )
AnlageFiles.append(x)
zf.writestr( x['Filename'],x['data'].read())
seq+=1
zf.close()
#
response = HttpResponse(content_type='application/x-zip-compressed')
response['Content-Disposition'] = 'attachment; filename="Anlage_{}.zip'.format(self.pk)
response.write(tfile.getvalue())
tfile.close()
return response
There is a View called SytemOverView
it checks all models for a foreign key to System
if they have one,
it calls the get_pdf_url Method
and creates a context for a list
You can click the urls and get the pdf (up to 54) in the View, works fine
Now I created a ZIP view to download all pdf's in one go
but my pdf files in the zip only contain the login page html code
as the requests query is not authorized.
How can I reuse the django session for the system zip view to launch
the requests for all pdf's?

Like I said in the comments, you are making an external call to your own website, you should call the pdf view directly pass along the request object to retain the session as below, but it seems it bit difficult to modify the request object to construct your different PDFs
def pdf_view(request):
...
# construct pdf
...
return pdf_response
def zipview(request):
pdf1 = pdf_view(request)
pdf2 = pdf_view(request)
# do the zip
I recommend refactor out the pdf function as below:
def generate_pdf(...):
...
return pdf
def pdf_view(request):
...
return generate_pdf(..)
def zip_view(request):
pdf1 = generate_pdf(params)
pdf2 = generate_pdf(params)
# do the zip

Use the session from the connected client and a simple javascript function to collect the files.
In the template of the django view I create a script that collects all pdf files from the page and builds a zip file from it.
<input id="zipme" type="button" value="Create Zip File (takes some time ...)" onclick="CreateZip();" class="btn btn-primary hidden-print btn-block" />
<script src="/static/js/jszip.min.js"></script>
<script src="/static/js/FileSaver.min.js"></script>
<script type="text/javascript">
function CreateZip(){
var zip = new JSZip();
var zaehler=0
{% for formdata in Doku %}
var {{formdata.blob}} = null;
var {{formdata.request}} = new XMLHttpRequest();
{{formdata.request}}.open("GET", "{{ formdata.pdf_url }}" );
//{{formdata.request}}.onload = function(){
// {{formdata.blob}} = {{formdata.request}}.responseText;
//}
{{formdata.request}}.send();
zaehler=zaehler+1;
//
{{formdata.request}}.onreadystatechange = function () {
if ({{formdata.request}}.readyState == 4) {
zaehler=zaehler-1;
{{formdata.blob}} = {{formdata.request}}.responseText;
zip.file("{{formdata.Filename}}", {{formdata.blob}});
//console.log("{{formdata.Filename}}");
if ( zaehler==0 ) {
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, "Anlage.zip");
});
}
}
};
{% endfor %}
};
</script>
In the view I just added a context list variable Doku with dict's of individual and uniq variable names to process. This saves from an asynchronous headache.

How to create Django click buttons in ajax template for Python callback functions

I'm trying to create a template/ajax that three buttons that send three different parametervalues back to Python function according to the following;
- one variabel current_count starts with the value 0 and updates +-1 for each button click on one of the following clickbuttons;
Button1 - Click button 'Forward' returns the char 'F' from the template when clicked to the view function one_move() wherein it (the char 'F') is passed as a parameter to a Python -function that is executed when it receives a parameter.When clickbutton Forward is returned to the view it also increases the value of current_count with +1 current value(through an if statement)
Button2 - Click button 'Backward' returns the char 'D' from the template when clicked to the view function one_move() wherein it (the char 'D') is passed as a parameter to a Python -function that is executed when it receives a parameter.When clickbutton Backward is returned to the view it also decreases the value of current_count with -1 from it's current value(through an if statement)
Button3 - Click button 'OK' returns chars 'S' from the template when clicked to the view function one_move() wherein it (the char 'S') is passed as a parameter to a Python -function that is executed when it receives a
parameter.When clickbutton OK the value of current_count remains unchanged, that is, with its current value.
The purpose of the above is to implement a pygame wherein the modelfields listview and sentence, which are passed through the Python callback function in one_move() in views.py, are displayed in the html as ["Dave", 8, "to", "work"] wherein 8 is a marker for current position and "went" is placed on the left of the list (which is done by the Python callback function). Pressing the clickbutton "Forward" results in the marker moving one step to the right per click, from "went" to "to", pressing "Backward" results in the marker moving one step to the left per click, e.g from "went" to "Dave", within the range of the list. The third button, OK, selects the word at the marker position, for instance "went". The listview is updated according to the current positionnumber in the variabel current_count.
in models.py
class MoveInList(models.Model):
click_char = models.CharField(max_length=70)
current_count = models.IntegerField()
listview = models.TextField()
sentence = models.TextField()
# function to update increase/decrease in (self)current_count value
def count_changes(self):
count = self.change_set.filter(is_public=True).count()
self.current_count = count
self.save()
def __unicode__(self):
return self.current_count
class OneMove(models.Model):
click_char = models.CharField(max_length=70)
current_count = models.IntegerField()
listview = models.TextField()
sentence = models.TextField()
belongsTo = models.ForeignKey(MoveInList)
def __unicode__(self):
return self.click_count
in forms.py
class MoveInListForm(forms.Form):
click_char = forms.CharField(max_length=70)
current_count = forms.IntegerField()
listview = forms.CharField(max_length=70)
sentence = forms.CharField(max_length=70)
in views.py
def MoveInListIndex(request):
moves = MoveInList.objects.all()
return render(request,"button.html", {"moves":moves})
def one_move(request,postID):
one_moves = MoveInList.objects.get(id=postID)
if request.method == 'POST':
form = MoveInListForm(request.POST)
if form.is_valid:
post_one_move(request, one_move)
else:
MoveInListForm()
# PYTHON CALLBACK function is used with params from template
c = {"one_move":one_move,"form":form}
c.update(csrf(request))
return render(request,"button.html", c)
def post_one_move(request, one_move):
click_count = request.POST['click_count']
current_count = request.POST['current_count']
listview = request.POST['listview ']
sentence = request.POST['sentence']
clickMove = OneMove(belongsTo=one_move,click_count=click_count,current_count=current_count,listview=listview,sentence=sentence)
clickMove.save()
in urls.py
url(r'^button$', MoveInListIndex),
url(r'^button/(?P<postID>\d+)$', one_move),
in template.py with ajax.py
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="">{% csrf_token %}
Forward: <input type="submit" value="button""></input></br>
Backward: <input type="submit" value="button""></input></br>
OK: <input type="submit" value="button""></input></br>
{{ form.as_p}}
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#button').on('click', function (e) {
var current_count = $('#button').val();
var data = { current_count :current_count };
var args = { dataType: "json", type:"POST", url:"/button/",
data:data, complete:ajax_call_complete };
$.ajax(args);
});
});
var ajax_call_complete = function(res, status) {
data = jQuery.parseJSON(res.responseText);
// use data as a json response object here and
// do something with the response data
}
</script>
</body>
</html>
At the moment, the template button.html isn't returning or displaying anything and any advice on how to get the ajax going is highly appreciated.

I think you might need to use HttpResponse() rather than render() to pass back the data to client side:
from django.http.response import HttpResponse
import json
def one_move(request,postID):
...
d = {"responseText": "your data here"}
return HttpResponse(json.dumps(d))
Then you should be able to get the return in your ajax_call_complete() javascript function

Return JSON object to View with Flask and Ajax

I am trying to return a python dictionary to the view with AJAX and reading from a JSON file, but so far I am only returning [object Object],[object Object]...
and if I inspect the network traffic, I can indeed see the correct data.
So here is how my code looks like. I have a class and a method which based on the selected ID (request argument method), will print specific data. Its getting the data from a python discretionary. the problem is not here, have already just tested it. But just in case I will link it.
# method to create the directionary - just in case #
def getCourselist_byClass(self, classid):
"""
Getting the courselist by the class id, joining the two tables.
Will only get data if both of them exist in their main tables.
Returning as a list.
"""
connection = db.session.connection()
querylist = []
raw_sql = text("""
SELECT
course.course_id,
course.course_name
FROM
course
WHERE
EXISTS(
SELECT 1
FROM
class_course_identifier
WHERE
course.course_id = class_course_identifier.course_id
AND EXISTS(
SELECT 1
FROM
class
WHERE
class_course_identifier.class_id = class.class_id
AND class.class_id = :classid
)
)""")
query = connection.engine.execute(raw_sql, {'classid': classid})
for column in query:
dict = {
'course_id' : column['course_id'],
'course_name' : column['course_name']
}
querylist.append(dict)
return querylist
my jsonify route method
#main.route('/task/create_test')
def get_courselist():
#objects
course = CourseClass()
class_id = request.args.get('a', type=int)
#methods
results = course.getCourselist_byClass(class_id)
return jsonify(result=results)
HTML
and here is how the input field and where it should link the data looks like.
<input type="text" size="5" name="a">
<span id="result">?</span>
<p>click me
and then I am calling it like this
<script type=text/javascript>
$(function() {
$('a#link').bind('click', function() {
$.getJSON("{{ url_for('main.get_courselist') }}", {
a: $('input[name="a"]').val()
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
</script>
but every time I enter a id number in the field, i am getting the correct data. but it is not formatted correctly. It is instead printing it like [object Object]
source, followed this guide as inspiration: flask ajax example

The data return by your server is like: {result: [{course_id: 'xxx', course_name: 'xxx'}]}, in which data.result is a JS Array.
when you set it to $("#result").text(), JS convert a array to string, so the result is [object Object].
You should iterate over the array to construct a string, then set the string in DOM, like:
courseStr = data.result.map(function(course) {return course.course_id + '-' + course.course_name; }).join(',');
$("#result").text(courseStr);

The API description for flask.json.jsonify indicates it's expecting keyword parameters. What you actually want to do seems to be serialize a list object containing dictionaries, have you tried flask.json.dumps instead? Assuming you've got the dumps symbol imported, instead of your jsonify call you can try:
return dumps(results)

How to set value of hidden form in Mechanize/Python?

I'm scraping a site that uses a hidden form as a means of a countermeasure against exactly what I'm trying to do. This form:
<input style="width: 2px; height: 25px" type="hidden" size="1" name="TestJavaScript" />
is the culprit. The form expects that this input's value will be set to "OK" by some JavaScript that executes later on down the line:
function doSignOn() {
window.document.tether.method = "POST";
window.document.tether.action = "https://missionlink.missionfcu.org/MFCU/login.aspx";
window.document.tether.TestJavaScript.value = "OK";
if (window.document.tether.user.value.length < 1) {
alert("Please enter your Member Number.");
return;
}
if (window.document.tether.PIN.value.length < 1) {
alert("Please enter your Password.");
return;
}
// If we're in the service interruption or notice window, put up an alert.
if (now <= interruption_end) {
if (now >= notice_begin) {
alert(prewarn_alert+'\n\nThank you.');
}
}
window.document.tether.submit();
}
Clever. I'm using mechanize to scrape the page, how can I set the value of this form item? When I print the form object in Python, here's what it looks like:
<tether POST https://missionlink.missionfcu.org/MFCU/login.aspx application/x-www-form-urlencoded
<TextControl(user=)>
<PasswordControl(PIN=)>
<HiddenControl(TestJavaScript=) (readonly)>
<SelectControl(signonDest=[*My Default Destination, Accounts.Activity, Accounts.Summary, Transfers.AddTransfer, SelfService.SelfService])>
>
As it shows up as "read only", I can't modify it, else it throws an exception. Surely there's a workaround, right? Any ideas?

As posted elsewhere (namely on the mechanize library's FAQ page):
form.find_control("foo").readonly = False # allow changing .value of control foo
form.set_all_readonly(False) # allow changing the .value of all controls