Upload Image to Blob using GAE + Django - django

I'm writing an application using GAE and Django in which I want to give to user the ability to upload his image. Also, I want this image be stored as blob on GAE's datastore. I have seen many examples but nothing specific to this scenario. Although, I feel that is a common issue.
All I want, is to create a new product and this new product must have an image.
1st Attempt: I have tried to add an image attribute (db.BlobProperty()) in product's model, and obviously django does not include it on the presented form.
2nd Attempt: I have created a new entity with two attributes (product as db.ReferenceProperty() and image as db.BlobProperty()). With this I tried to work parallel with django form modifying the django HTML form (including an |input type='file' name='img' /|) expecting that I could take the image from the request object but I failed once more.
This is the Product Class:
class Product(db.Model):
id = db.IntegerProperty()
desc = db.StringProperty()
prodCateg = db.ReferenceProperty(ProductCategory)
price = db.FloatProperty()
details = db.StringProperty()
image = db.BlobProperty()
This is the Django Form (HTML):
<form action="{%url admin.editProduct product.key.id%}" enctype="multipart/form-data" method="post">
<table>
{{form}}
<tr><td><input type="file" name="img" /></td></tr>
<tr><td><input type="submit" value="Create or Edit Product"></td></tr>
</table>
</form>
This is the Django Form (python):
class ProductForm(djangoforms.ModelForm):
class Meta:
model = Product
exclude = ['id']
This is the request handler:
def editProduct(request, product_id):
user = users.GetCurrentUser()
#if user is None:
# return http.HttpResponseForbidden('You must be signed in to add or edit a gift')
product = None
if product_id:
product = Product.get(db.Key.from_path(Product.kind(), int(product_id)))
if product is None:
return http.HttpResponseNotFound('No product exists with that key (%r)' %
product)
form = ProductForm(data=request.POST or None, instance=product)
##########################
# Ambitious undertaking! #
##########################
#if not product_id:
# uploadedImage = get("img")
# photo = Image()
# photo.product = product
# uploadedPhoto = request.FILES['img'].read()
# photo.image = db.Blob(uploadedPhoto)
# image.put()
if not request.POST:
return respond(request, user, 'addprod', {'form': form, 'product': product})
errors = form.errors
if not errors:
try:
product = form.save(commit=False)
except ValueError, err:
errors['__all__'] = unicode(err)
if errors:
return respond(request, user, 'addprod', {'form': form, 'product': product})
product.put()
return http.HttpResponseRedirect('/product')
As you can see the request handler is based on the Google's Gift-Tutorial
So, If anyone could put his opinion I would be very thankful!
Thank you in advance!

You may want to look at an example that uses the blobstore API with blobstoreuploadhandler and/or edit your request handler to store the uploaded file as a blobproperty or a blobreferenceproperty depending on if you use the blobstore API or just a blobproperty variable. You can be specific about http post data i.e. `
self.request.post('img').file.read()
I do recommend that you choose the blobstore API and blobstoreuploadhandler since that will do some very good things for you automatically: 1. storing MIM type and 2. storing filename 3. enabling serving via get_serving_url that has several advantages.

Related

Django update boolean field with a form

My simple web-application has two models that are linked (one to many).
The first model (Newplate) has a boolean field called plate_complete. This is set to False (0) at the start.
questions:
In a html page, I am trying to build a form and button that when pressed sets the above field to True. At the moment when I click the button the page refreshes but there is no change to the database (plate_complete is still False). How do I do this?
Ideally, once the button is pressed I would also like to re-direct the user to another webpage (readplates.html). This webpage does not require the pk field (but the form does to change the specific record) Hence for now I am just refreshing the extendingplates.html file. How do I do this too ?
My code:
"""Model"""
class NewPlate(models.Model):
plate_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
title = models.CharField(max_length=200)
created_date = models.DateTimeField(default=timezone.now)
plate_complete = models.BooleanField()
"""view"""
def publish_plates(request,plate_id):
newplate = get_object_or_404(NewPlate, pk=plate_id)
newplate.plate_complete = True
newplate.save()
#2nd method
NewPlate.objects.filter(pk=plate_id).update(plate_complete = True)
return HttpResponseRedirect(reverse('tablet:extendplates', args=[plate_id]))
"""URLS"""
path('readplates', views.read_plates, name='readplates'),
path('extendplates/<pk>/', views.show_plates, name='showplates'),
path('extendplates/<pk>/', views.publish_plates, name='publishplates'),
"""HTML"""
<form method="POST" action="{% url 'tablet:publishplates' newplate.plate_id %}">
{% csrf_token %}
<button type="submit" class="button" value='True'>Publish</button></form>
-------Added show plates view:---------
def show_plates(request,pk):
mod = NewPlate.objects.all()
newplate= get_object_or_404(mod, pk=pk)
add2plate= Add2Plate.objects.filter(Add2Plateid=pk)
return render(request, 'tablet/show_plates.html', {'newplate': newplate,'add2plate': add2plate})
Thank you
The problem is two of your urls have the same pattern 'extendplates/<pk>/'. Django uses the first pattern that matches a url. I suppose that one of these view views.show_plates is meant to display the form and the other views.publish_plates is meant to accept the posted form data.
This means that simply both of these views should simply be a single view (to differentiate if the form is submitted we will simply check the requests method):
from django.shortcuts import redirect, render
def show_plates(request, plate_id):
newplate = get_object_or_404(NewPlate, pk=plate_id)
if request.method == "POST":
newplate.plate_complete = True
newplate.save()
return redirect('tablet:extendplates', plate_id)
context = {'newplate': newplate}
return render(request, 'your_template_name.html', context)
Now your url patterns can simply be (Note: Also captured arguments are passed as keyword arguments to the view so they should be consistent for your view and pattern):
urlpatterns = [
...
path('readplates', views.read_plates, name='readplates'),
path('extendplates/<uuid:plate_id>/', views.show_plates, name='showplates'),
...
]
In your form simply forego the action attribute as it is on the same page:
<form method="POST">
{% csrf_token %}
<button type="submit" class="button" value='True'>Publish</button>
</form>
You should avoid changing state on a get request like your view does currently.
Handle the POST request and change the data if the request is valid (ensuring CSRF protection).
def publish_plates(request,plate_id):
newplate = get_object_or_404(NewPlate, pk=plate_id)
if request.method == "POST":
newplate.plate_complete = True
newplate.save(update_fields=['plate_complete']) # a more efficient save
#2nd method
NewPlate.objects.filter(pk=plate_id).update(plate_complete=True)
return HttpResponseRedirect(reverse('tablet:extendplates', args=[plate_id]))
You could also put a hidden input in the form, or make a form in Django to hold the hidden input, which stores the plate_id value and that way you can have a generic URL which will fetch that ID from the POST data.
Now the real problem you've got here, is that you've got 2 URLs which are the same, but with 2 different views.
I'd suggest you change that so that URLs are unique;
path('extendplates/<pk>/', views.show_plates, name='showplates'),
path('publish-plates/<pk>/', views.publish_plates, name='publishplates'),

Wagtail form file upload

I have an issue when I add file upload field to Wagtail Forms Builder I get this error:
Exception Type: TypeError
Exception Value: Object of type InMemoryUploadedFile is not JSON serializable
This is my code:
class FormField(AbstractFormField):
CHOICES = FORM_FIELD_CHOICES + (('fileupload', 'File Upload'),)
page = ParentalKey('FormPage', on_delete=models.CASCADE, related_name='form_fields')
field_type = models.CharField(
verbose_name='field type',
max_length=16,
# use the choices tuple defined above
choices=CHOICES
)
api_fields = [
APIField('page'),
]
class CustomFormBuilder(FormBuilder):
def create_fileupload_field(self, field, options):
return forms.FileField(**options)
class FormPage(AbstractEmailForm):
form_builder = CustomFormBuilder
intro = RichTextField(blank=True)
thank_you_text = RichTextField(blank=True)
content_panels = AbstractEmailForm.content_panels + [
FieldPanel('intro', classname="full"),
InlinePanel('form_fields', label="Form fields"),
FieldPanel('thank_you_text', classname="full"),
MultiFieldPanel([
FieldRowPanel([
FieldPanel('from_address', classname="col6"),
FieldPanel('to_address', classname="col6"),
]),
FieldPanel('subject'),
], "Email"),
]
# Export fields over the API
api_fields = [
APIField('intro'),
APIField('thank_you_text'),
]
This is my template:
{% load wagtailcore_tags %}
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ page.intro|richtext }}
<form action="{% pageurl page %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<input type="submit">
</form>
</body>
</html>
Wagtail version 2.8.1
Django version 3.0.5
any idea with this issue ?
The core issue here is that you are attempting to store an uploaded file as JSON. Wagtail's FormBuilder does not store the submission data parts as their own DB models but instead bundles is up as json (e.g. {'field-a': 'value'}) and stores that as a string in the database.
The reason for this is that the data stored is flexible on a per page basis and can change over time based on the page's settings.
So, to fully implement a file upload field, you need to store those files somewhere, plus solve a few other problems.
1. Where to store the file
Depending on your Django setup, you will need to get a basic understanding of how to Store files in Django
You will need to create a new model that will store these files, see FormUploadedFile in the example below
Depending on your use case, you will need to consider multiple files uploaded in each form submission, as the FormPage UI enables users to create multiple of any field type, hence it might be good to keep a reference to the field name it is stored under.
2. What to save in the JSON as a reference to the file
This could be a simple pk (primary key) reference, as per the code example below.
You may want to add some more advanced linking between the file upload model and the FormSubmission model for better data integrity
You will need to override the process_form_submission on your FormPage model, you can see the original code here https://github.com/wagtail/wagtail/blob/master/wagtail/contrib/forms/models.py#L195
3. Reading the file and what to represent as this file in the form submissions list
You may want to modify the get_data output from the FormSubmission records, you can do this by adding a custom FormSubmission model (see code below), however this will be in place of your existing model (so your existing submissions will no longer be visible without some sort of migration or other workaround).
You can see the original get_data method here https://github.com/wagtail/wagtail/blob/master/wagtail/contrib/forms/models.py#L48
The Wagatil docs section has a good part about customising the submissions list
Example Code
Here is a rough working POC to get you started, hope this helps.
import json
from django.core.serializers.json import DjangoJSONEncoder
from django.db import models
from django import forms
from modelcluster.fields import ParentalKey
from wagtail.contrib.forms.models import (
AbstractEmailForm, AbstractFormField, AbstractFormSubmission, FORM_FIELD_CHOICES)
from wagtail.contrib.forms.forms import FormBuilder
from wagtail.contrib.forms.views import SubmissionsListView
class FormField(AbstractFormField):
page = ParentalKey('FormPage', related_name='form_fields', on_delete=models.CASCADE)
field_type = models.CharField(
verbose_name='field type',
max_length=16,
choices=FORM_FIELD_CHOICES + (('fileupload', 'File Upload'),)
)
class CustomFormBuilder(FormBuilder):
def create_fileupload_field(self, field, options):
return forms.FileField(**options)
class CustomSubmissionsListView(SubmissionsListView):
"""
further customisation of submission list can be done here
"""
pass
class CustomFormSubmission(AbstractFormSubmission):
# important - adding this custom model will make existing submissions unavailable
# can be resolved with a custom migration
def get_data(self):
"""
Here we hook in to the data representation that the form submission returns
Note: there is another way to do this with a custom SubmissionsListView
However, this gives a bit more granular control
"""
file_form_fields = [
field.clean_name for field in self.page.specific.get_form_fields()
if field.field_type == 'fileupload'
]
data = super().get_data()
for field_name, field_vale in data.items():
if field_name in file_form_fields:
# now we can update the 'representation' of this value
# we could query the FormUploadedFile based on field_vale (pk)
# then return the filename etc.
pass
return data
class FormUploadedFile(models.Model):
file = models.FileField(upload_to="files/%Y/%m/%d")
field_name = models.CharField(blank=True, max_length=254)
class FormPage(AbstractEmailForm):
form_builder = CustomFormBuilder
submissions_list_view_class = CustomSubmissionsListView
# ... other fields (image, body etc)
content_panels = AbstractEmailForm.content_panels + [
# ...
]
def get_submission_class(self):
"""
Returns submission class.
Important: will make your existing data no longer visible, only needed if you want to customise
the get_data call on the form submission class, but might come in handy if you do it early
You can override this method to provide custom submission class.
Your class must be inherited from AbstractFormSubmission.
"""
return CustomFormSubmission
def process_form_submission(self, form):
"""
Accepts form instance with submitted data, user and page.
Creates submission instance.
You can override this method if you want to have custom creation logic.
For example, if you want to save reference to a user.
"""
file_form_fields = [field.clean_name for field in self.get_form_fields() if field.field_type == 'fileupload']
for (field_name, field_value) in form.cleaned_data.items():
if field_name in file_form_fields:
uploaded_file = FormUploadedFile.objects.create(
file=field_value,
field_name=field_name
)
# store a reference to the pk (as this can be converted to JSON)
form.cleaned_data[field_name] = uploaded_file.pk
return self.get_submission_class().objects.create(
form_data=json.dumps(form.cleaned_data, cls=DjangoJSONEncoder),
page=self,
)

How to integrate a form into a Detail View?

I would like to do:
I am trying to create a form input on a detail view that will update a particular data column ('status') of the detailed model instance. Here is a picture of what I have in mind:
The selector would display the current status and the user could change it and update from the detail view without having to access the UpdateView.
my idea here would be to have this happen:
1. On submit, get the new user entered value.
2. get the model instance of the currently detailed class
3. assign the model instance attribute as the user entered value
4. save the model instance
I've tried: I don't know if this is the best way to do this but i've been trying to create an AJAX call, mostly by looking for examples online.
Results: Terminal shows Post on submit: "[19/Nov/2019 17:50:33] "POST /task/edit/4 HTTP/1.1" 200 41256". However, the data is not saved to the db. On refresh, the selector returns to previously saved status.
The console shows: "script is connected", and "Update Status" with no errors. On submit, the alert displays success message: "127.0.0.1:8000 says status updated".
Task_detail.html
<div class="deliv-box edit">
<form id="status-update-form" method='POST' action='{% url "task_edit" task.pk %}'>
{% csrf_token %}
{{task_form.status}}
<input id="status-update-btn" type="submit" value="Update Status" />
</form>
</div>
...
<script type="text/javascript">
var frm = $('#status-update-form');
frm.submit(function () {
console.log("script is connected")
console.log($('#status-update-btn').val())
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$("#deliv-box edit").html(data);
alert("status updated");
},
error: function(data) {
alert("error");
}
});
return false;
});
</script>
forms.py
class TaskForm(forms.ModelForm):
class Meta:
model = Task
fields = "__all__"
views.py
class TaskDetail(ModelFormMixin, DetailView):
template_name='task_detail.html'
model = Task
form_class = TaskForm
def get_context_data(self, **kwargs):
context = super(TaskDetail, self).get_context_data(**kwargs)
context['task_form'] = self.get_form
return context
def update(request):
if request.method=='POST':
task_id = request.POST.get('id')
task = Task.objects.get(pk = task_id)
status_obj = request.POST.get('status')
task.status = status_obj
task.save()
return JsonResponse({'status':'updated...'})
else:
return JsonResponse({'status':'not updated'})
thank you.
A solution:
In the unlikely event that someone stumbles across this question and who is, like me, just trying to figure it out all by themselves, here is what I've learned about how this works: When a user wants to update a form, Django pre-populates the form with the existing data related to that instance. A user can then alter the data and re-submit the form.
Here, I was attempting to alter just one field of the exiting instance, but as I was only calling that one field, Django was assuming not, as I had hoped, that the other fields would remain the same, but that I intended the other fields to be submitted as blank. Where the fields are required one cannot return that field as blank. Therefore, Django was not able to validate the form and so the form did not get updated.
A solution that works is to call all the fields as hidden and show just the one you want to alter. This way Django can return the unaltered data and validate the form, and you get an update button on your detail view:
<form method="POST">
{% csrf_token %}
<h4> STATUS: </h4>
{% for field in form %}
{{ field.as_hidden }}
{% endfor %}
{{form.status}}
<button type="submit" class="btn btn-success">submit</button>
</form>
You are overriding the method update which does not exist, so it is never called.
You need to subclass UpdateView instead of the DetailView and the mixin.
class TaskUpdateView(UpdateView):
template_name='task_detail.html'
model = Task
form_class = TaskForm
# you can use the line below instead of defining form_class to generate a model form automatically
# fields = ('status', )
def form_valid(self, form):
post = form.save(commit=False)
# do anything here before you commit the save
post.save()
# or instead of two lines above, just do post = form.save()
return JsonResponse({'status':'updated...'})
Here is how you would add readonly (disabled) fields to your form:
class TaskForm(forms.ModelForm):
# override the default form field definitions for readonly fields
other_field = forms.CharField(disabled=True)
another_field = forms.IntegerField(disabled=True)
class Meta:
model = Task
fields = ("status", "other_field", "another_field")
# you could also just do:
# fields = '__all__'

File Uploads via FormModel (Official description), but form.is_valid is always false

I'm trying to use FormModel to handle a file upload, but form.is_valid() is always returning false, and never shows any kind of error.Following is the code snippet from models.py,forms.py,views.py and my POST request.
models.py
class Pics(models.Model):
id = models.AutoField(primary_key=True,)
username = models.CharField(max_length=45)
path = models.ImageField(upload_to=img_path)
forms.py
class PicsForm(forms.ModelForm):
class Meta:
model = Pics
fields = ['username','path']
views.py
def uploads(request:HttpRequest):
form = PicsForm(request.POST,request.FILES)
if form.is_valid():
# instance = Pics(username=request.POST['username'],path=request.FILES['file'])
# instance.save()
form.save()
print('***')
else:
print('&&&&&&&&&&&&&')
return HttpResponse("succeed")
here is my postman set
I expect the output of '***', but the actual output is '&&&&&&&&&&&&&'
Be sure that your html form has 'enctype="multipart/form-data"' and your file upload input has name 'path', for example, your form should be like:
<form action="some_url" method="POST" enctype="multipart/form-data">
<input type='text' name='username'>
<input type="file" name="path">
</form>
I suspect Postman is not setting a CSRF token. Is there a reason that you are testing with Postman rather than creating an HTML form and submitting to it through your browser? I would do the latter, and if there is still a problem you could show us your template.

Django: How to return model formset in ajax and use in template

I need to dynamically add forms to my formset during runtime using ajax, for which I am referring to Dynamically adding a form to a Django formset with Ajax
I have multiple formsets on the same page with different prefixes.
My models are designed like so:
A user can have many phones. A phone can have many lines (if details are needed)
Accessing Many to Many "through" relation fields in Formsets
Once a user adds a new phone, I save the phone using ajax. The view is as follows
def addUserPhone(request, customer_id, location_id, user_id, **kwargs):
error_msg = u"No POST data sent."
context = {}
if request.is_ajax():
if request.method == "POST":
user = End_User.objects.get(id=user_id)
phone_client = PartialPhone_ClientForm(request.POST, prefix='new_client')
instance = phone_client.save()
#associate user to a phone
instance.end_user.add(user)
#Creating an empty lineFormset for a phone
LineFormSet = modelformset_factory(Line, form=Line_Form, can_delete=True)
client_lines = LineFormSet(queryset=Line.objects.none(), prefix='phone_client_'+str(instance.id))
# how to return the two objects instance and client_lines back to the template??
#format = 'json'
#mimetype = 'application/javascript'
#data = serializers.serialize(format, [instance])
#return HttpResponse(data)
#can we return as a context?? this gives me only a string "phoneline_set" in the template
context['phone'] = instance
context['line_set'] = client_lines
return HttpResponse(context)
else:
error_msg = u"Insufficient POST data (need 'Name ' and 'Telephone Number'!)"
else:
error_msg = "Non Ajax"
return HttpResponseServerError(error_msg)
What is the best way to now return the phone instance, and LineFormSet back to the view for rendering in the template??
If I just return a context, my view gets only string "phoneline_set". But I want to do something like
$.post("addUserPhone/",phoneData,function(data){
$('.scroll').append("<h2> {{ line_set }} </h2>")
});
If I serialize using Json and pass how can I pass the LineFormSet and use it in template?
Currently if I try to serialize my client_lines formset I get the error
AttributeError: 'LineFormFormSet' object has no attribute '_meta'
Any help is appreciated, Thanks!!
Just elaborating on Daniel's answer as requested in the comment.
Django is an MVC style framework. Models are used in order to store and access data. In Django controllers are called views, which have a job of getting a request from a user with a certain URL, get some data which might be associated with the url, and then push that data throught some tempalte which will use the data view gave it in order to fill in the placeholders inside of the template.
Here is a simple example which explains all the aspects. Imagine that there is a web site which has a database of books. So your model would store information relevant to each book - Title, Author, ISBN number, etc.
# models.py
class Book(models.Model):
title = models.CharField(max_length=64)
author = models.CharField(max_length=64)
isbn = models.CharField(max_length=64)
Now you want to add a URL example.com/book/<id>/ which will display all of the information about the book with specified id. For that to happen, couple of things need to happen. First Django controller has to catch the url with this pattern. You specify the url pattern in the urls.py file.
# urls.py
urlpattern('',
url(r'^book/(?P<id>\d+)/$', views.book),
)
Since urls.py specify a mapping between url patterns and views, that tells Django that whenever user goes to a URL with the specified pattern, Django has to give the request to the view book which will know what to do. Additionally Django will pass the book id to the view.
# views.py
def book(request, id):
# get the book
book = get_object_or_404(Book, pk=id)
context = {
'book': book
}
return render_to_response('book_template.html', context)
So inside of the view, given the ID of the book, it uses models in order to look up the book from the database, and it case it is not found, it returns 404 error to the user. Then it populates a dictionary which I called context with some values which it will pass to the template. The job of the template is to take this context dictionary and use values inside of it in order to fill in some placeholders inside the template.
# book_template.html
<html>
<head>...</head>
<body>
<h1>{{ book.title }}</h1>
<p>Author: {{ book.author }}</p>
<p>ISBN: {{ book.isbn }}</p>
</body>
</html>
So the template will take the context from the view and then use the book inside of the context in order to fill in the values inside {{ }}.
In your case you are trying to return a context to the user which does not make much sense. What you have to do is create a template which will take the that context { 'phone': instance, 'line_set': client_lines } and according to it, will render some HTML which will be returned to the user. And that HTML you can pull using AJAX and then use it however you need it.
Hopefully this clarifies some concepts for you.
Django documentation is excellent so I would recomment to also read the intro. It will explain all of the syntax and some of the shortcuts I have used in this answer (render_to_response, etc).
You don't send the context as the Ajax response, you send a rendered template fragment using that context. The template should just be the HTML containing the form that you want to insert into your div.