We Keep Coding

Why is my Pillow Image not being considered a File when I try to save it into my django image field?

I'm writing a Form Creation/Filling out forms app, and I'm to the point where I'm taking canvas data from the front-end and filled out fields of text input and draw them on a picture of the form with the pillow library. The problem is when I try to save the data for the form I get this error from "serializer.error" from django-rest-framework: "'FilledForm': [ErrorDetail(string='The submitted data was not a file. Check the encoding type on the form.', code='invalid')]}"
Here is the Api view:
#api_view(['POST'])
def postForm(request):
dataDict = request.data
FieldCoords = {}
# Define Formtype
selectedForm = dataDict["SelectedForm"]
del dataDict["SelectedForm"]
# Get Datalist for form creation
datalist = list(FormData.objects.filter(FormType=selectedForm).values())
#Set Signature Images on Form and Fill form with inputs
for field in datalist:
#Get Field Positions of Model
if field["FieldType"] == "SignatureField":
FieldCoords[field["FieldName"]] = (field["StartX"],field["StartY"])
elif field["FieldType"] == "TextField":
FieldCoords[field["FieldName"]] = (field["StartX"],field["StartY"],abs(field["height"]))
elif field["FieldType"] == "DateField":
FieldCoords[field["FieldName"]] = (field["StartX"],field["StartY"])
#print(FieldCoords)
#Place Signature Fields On FormImage
sigFields = json.loads(dataDict["Signatures"])
FormImage = Image.open(f"{MEDIA_ROOT}/{selectedForm}")
del dataDict["Signatures"]
for field in sigFields:
datauri = sigFields[field]
uri = datauri.split("base64,")
sNameselect = field.split(" - ")
bytes = base64.b64decode(uri[1])
img = Image.open(io.BytesIO(bytes))
for keyCoordSet in FieldCoords:
print(keyCoordSet)
print("Name" + sNameselect[0])
if sNameselect[0] == keyCoordSet:
print("Im here")
FormImage.paste(img, FieldCoords[keyCoordSet], mask=img)
#Place Text Fields On FormImage
d1 = ImageDraw.Draw(FormImage)
for field in dataDict:
for keyCoordSet in FieldCoords:
if field == keyCoordSet:
myFont = ImageFont.truetype("LiberationMono-Regular.ttf",size=FieldCoords[keyCoordSet][2] - 10)
d1.text((FieldCoords[keyCoordSet][0]+5,FieldCoords[keyCoordSet][1]+5), dataDict[field], fill =(255, 255, 255),font=myFont)
time = str(timezone.now()).split(" ")
image_bytes = io.BytesIO(FormImage.tobytes())
imageFile = ContentFile(image_bytes.getvalue())
print(imageFile.read())
data = { # Final data structure
"FormType": selectedForm,
"DateCreated": time[0],
"Data": json.dumps(dataDict, indent = 4),
"FilledForm": (str(selectedForm),imageFile)
}
serializer = FilledFormdataSerializer(data=data)
print(type(imageFile))
if serializer.is_valid():
print("Im Valid")
#serializer.save()
else:
print(serializer.errors)
return Response("Returned Data")
Here is the Model
class FilledForm(models.Model):
FormType = models.CharField(max_length=100)
DateCreated = models.DateField(default=timezone.now())
Data = models.JSONField()
FilledForm = models.ImageField()
Here is the serializer
class FilledFormdataSerializer(serializers.ModelSerializer):
class Meta:
model = FilledForm
fields = ["FormType", "DateCreated", "Data", "FilledForm"]
def create(self, validated_data):
print(validated_data)
return FilledForm.objects.create(**validated_data)
Heres the part of the Code where the issue is
#Place Text Fields On FormImage
d1 = ImageDraw.Draw(FormImage)
for field in dataDict:
for keyCoordSet in FieldCoords:
if field == keyCoordSet:
myFont = ImageFont.truetype("LiberationMono-Regular.ttf",size=FieldCoords[keyCoordSet][2] - 10)
d1.text((FieldCoords[keyCoordSet][0]+5,FieldCoords[keyCoordSet][1]+5), dataDict[field], fill =(255, 255, 255),font=myFont)
time = str(timezone.now()).split(" ")
image_bytes = io.BytesIO(FormImage.tobytes())
imageFile = ContentFile(image_bytes.getvalue())
print(imageFile.read())
data = { # Final data structure
"FormType": selectedForm,
"DateCreated": time[0],
"Data": json.dumps(dataDict, indent = 4),
"FilledForm": (str(selectedForm),imageFile)
}
serializer = FilledFormdataSerializer(data=data)
print(type(imageFile))
if serializer.is_valid():
print("Im Valid")
#serializer.save()
else:
print(serializer.errors)
Here's all the module imported
from rest_framework.response import Response
from rest_framework.decorators import api_view
from api.serializer import DataSerializer, FilledFormdataSerializer
from django.core.files import File
from django.utils import timezone
from backend.models import FormData
from django.core.files.base import ContentFile
import json
from PIL import Image, ImageDraw, ImageFont
import base64
import io
from FormApp.settings import BASE_DIR, MEDIA_ROOT
For some reason it's saying its not reading it as a file even though I'm converting it to bytes and rapping it in the ContentFile() object. Can I get some advice on why it's not saving to the image field?

How do I check if file upload field is empty?

I have a form that allows my to upload multiple image files. Everything works fine, when I select images to upload. If I try to submit the form without files, I get an error
OSError: cannot identify image file <FileStorage: '' ('application/octet-stream')>
I would like to be able to check if the field is empty and if so, bypass my save_images function.
Here is my form
class NewPortfolioProject(FlaskForm):
title = StringField('Project Name', validators=[DataRequired(), Length(max=50)])
description = TextAreaField('Description', validators=[
DataRequired(), Length(min=1, max=1000)])
tags = StringField('#Tags - space separated', validators=[DataRequired()])
link = StringField('Link to live project')
github_link = StringField('Github link', validators=[DataRequired()])
images = MultipleFileField('Add screenshots/wireframes', validators=[FileAllowed(['png', 'jpg'])])
submit = SubmitField('Save Project')
In my routes.py file I am trying to test if the MultipleFileField contains data
if form.validate_on_submit():
if not form.images.data:
portfolio.insert_one(new_doc)
else:
image_files = save_images(form.images.data)
new_doc['images'] = image_files
portfolio.insert_one(new_doc)
But this (and everything else I have tried) doesn't work.
Rather than being empty, form.images.data seems to be a filestorage object. How to I test if it is empty?

Apparently when you call form.images.data on MultipleFileField it returns a list that is never empty, which is why if form.images.data check always returns true.
I have eventually solved it using try/except in my image saving method, as in my case the error itself is raised when PIL tries to open the image and process it.
def save_image(form_picture):
random_hex = secrets.token_hex(8)
_, f_ext = os.path.splitext(form_picture.filename)
picture_fn = random_hex + f_ext
picture_path = os.path.join(current_app.root_path, 'static/images', picture_fn)
output_size = (600, 400)
try:
i = Image.open(form_picture)
i.thumbnail(output_size)
i.save(picture_path)
return picture_fn
except:
return False

Images getting rotated in Django Template

I am loading some images into a Django model.
When I display these images through a Django template, portrait images are rotated. If I view these same images through Django Admin by clicking on the link they display as I would expect.
This is my view to load the images:
def upload_profile(request, user_id):
variables = {}
if request.POST:
user_form = UserForm(request.POST, instance=User.objects.get(id=request.user.id))
myuser_form = MyUserForm(request.POST, request.FILES, instance=MyUser.objects.get(user__id=request.user.id))
if user_form.is_valid() and myuser_form.is_valid():
user_form.save()
myuser = myuser_form.save()
myuser.photo = apply_orientation(myuser.photo)
myuser.save()
return game_selection(request)
variables['user_form'] = user_form
variables['myuser_form'] = myuser_form
return render(request, 'esc/profile.html', variables)
And this is how I am applying the rotation:
def flip_horizontal(im): return im.transpose(Image.FLIP_LEFT_RIGHT)
def flip_vertical(im): return im.transpose(Image.FLIP_TOP_BOTTOM)
def rotate_180(im): return im.transpose(Image.ROTATE_180)
def rotate_90(im): return im.transpose(Image.ROTATE_90)
def rotate_270(im): return im.transpose(Image.ROTATE_270)
def transpose(im): return rotate_90(flip_horizontal(im))
def transverse(im): return rotate_90(flip_vertical(im))
orientation_funcs = [None,
lambda x: x,
flip_horizontal,
rotate_180,
flip_vertical,
transpose,
rotate_270,
transverse,
rotate_90
]
def apply_orientation(im):
"""
Extract the oritentation EXIF tag from the image, which should be a PIL Image instance,
and if there is an orientation tag that would rotate the image, apply that rotation to
the Image instance given to do an in-place rotation.
:param Image im: Image instance to inspect
:return: A possibly transposed image instance
"""
try:
kOrientationEXIFTag = 0x0112
if hasattr(im, '_getexif'): # only present in JPEGs
e = im._getexif() # returns None if no EXIF data
if e is not None:
#log.info('EXIF data found: %r', e)
orientation = e[kOrientationEXIFTag]
f = orientation_funcs[orientation]
return f(im)
except:
# We'd be here with an invalid orientation value or some random error?
pass # log.exception("Error applying EXIF Orientation tag")
return im
My code never seems to pass the condition if hasattr(im, '_getexif'):
**** EDIT ****
So it's not getting through because no matter what image I load there is no '_getexif'.
If I add print getattr(im, '_getexif') I get the following error, with all images
'ImageFieldFile' object has no attribute '_getexif'

So I dropped all the code above and replaced it with the following
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFill, Transpose, SmartResize
class MyUser(models.Model):
avatar = models.ImageField(upload_to='upload/avatars', max_length=255, blank=True, null=True)
avatar_thumbnail = ImageSpecField(
source='avatar',
processors = [Transpose(),SmartResize(200, 200)],
format = 'JPEG',
options = {'quality': 75}
)
It works

How to create an image to unit test an API

I have a simple model representing a female that a user can view, edit and create:
class Female(models.Model):
firstName = models.CharField(max_length=255)
lastName = models.CharField(max_length=255)
profileImage = models.ImageField()
bio = models.TextField()
fantasticBio = models.TextField()
I am using a multi-part form to send the data for a create via an Angular service. This works fine. The django view that handles the creation is:
#api_view(['POST'])
def createFemale(request):
serializedFemale = FemaleSerializer(data=request.data)
if serializedFemale.is_valid():
serializedFemale.save()
return Response(serializedFemale.data)
else:
return Response(serializedFemale.errors, status=status.HTTP_400_BAD_REQUEST)
My problem is that I am unable to fully unit test this view. I am having trouble creating an image that I can use to test the view via the test client. My knowledge of image generation is limited so I may be generating the image wrong, however it seems to be accepted as a Django ImageField when I write it directly to the database in my set up. The relevant test code is as follows:
def createImageFile():
"""
Convinience function to create a test image
"""
image = Image.new('RGBA', size=(50, 50), color=(256, 0, 0))
image_file = BytesIO()
image.save(image_file, 'PNG')
img_str = base64.b64encode(image_file.getvalue())
img_str = str.encode("data:image/png;base64,") + img_str
return ImageFile(img_str)
def test_createFemale(self):
"""
A valid Female created with the API should be in the database
"""
profileImage = SimpleUploadedFile("test.png", createImageFile().file, content_type="image/png")
femaleToCreate = {}
femaleToCreate['firstName'] = "Test"
femaleToCreate['lastName'] = "Female"
femaleToCreate['profileImage'] = profileImage
femaleToCreate['bio'] = "Test bio"
femaleToCreate['fantasticBio'] = "Fantastic test bio"
response = self.client.post(url, femaleToCreate)
self.assertEquals(response.status_code, 200) # Make sure valid request returns success response
The response I receive from the server is:
{'profileImage': ['Upload a valid image. The file you uploaded was either not an image or a corrupted image.']}
How can I create an image that will be accepted by my API from within my unit test?
Please refrain from suggesting a file read of an existing image, I have considered this option and chosen not to pursue it as I believe it is a bad practice.
Thank you for any help.

Ok so I've got round this as follows:
def test_images_by_component_id_update(self):
image = PIL.Image.new('RGB', size=(1, 1))
file = tempfile.NamedTemporaryFile(suffix='.jpg')
image.save(file)
with open(file.name, 'rb') as f:
data = {'image': f}
response = self.client.patch(reverse('foo', args=(1, 1)), data=data, format='multipart')
self.assertEqual(200, response.status_code)
Notice I have to reopen the file, this took a while to debug. For whatever reason it doesn't like the NamedTemporaryFile.file attribute so I had to reopen.

Storing images in google datastore using Flask (Python)

I am using flask on google app engine and am desperately looking for help to solve this.
The GAE documentation talks of storing images in the datastore using the BlobProperty , which should be done something like this:-
class MyPics(db.Model):
name=db.StringProperty()
pic=db.BlobProperty()
Now the image should be stored in the datastore by doing this:-
def storeimage():
pics=MyPics()
pics.name=request.form['name']
uploadedpic=request.files['file'] #where file is the fieldname in the form of the
file uploaded
pics.pic=db.Blob(uploadedpic)
pics.put()
redirect ... etc etc
But am unable to do this. as I get db.Blob accepts a string , but given a Filestorage object... Can someone help me with this. Also if anybody could hint me on how to stream the image back after uploading.

Ok so this is how I finally solved it:-
#userreg.route('/mypics',methods=['GET','POST'])
def mypics():
if request.method=='POST':
mydata=MyPics()
mydata.name=request.form['myname']
file=request.files['file']
filedata=file.read()
if file:
mydata.pic=db.Blob(filedata)
mydata.put()
return redirect(url_for('home'))
return render_template('mypicform.html')
The above stores the file as a blob in the datastore and then it can be retrieved by the below func:-
#userreg.route('/pic/<name>')
def getpic(name):
qu=db.Query(MyPics).filter('name =',name).get()
if qu.pic is None:
return "hello"
else:
mimetype = 'image/png'
return current_app.response_class(qu.pic,mimetype=mimetype,direct_passthrough=False)

You should consider using the BlobStore to store your data. Instead of a db.Blob you would be using blobstore.BlobReferenceProperty: http://code.google.com/appengine/docs/python/datastore/typesandpropertyclasses.html#BlobReferenceProperty
Uploading and download is quite easy as shown here: http://code.google.com/appengine/docs/python/blobstore/overview.html#Complete_Sample_App

I have following model
class Picture(db.Model):
data = db.BlobProperty()
ext = db.StringProperty()
content_type = db.StringProperty()
and store it using next code:
def create_picture():
if request.files['file']:
picture.data = request.files['file'].read()
picture.ext = request.files['file'].filename.rsplit('.', 1)[1]
picture.content_type = request.files['file'].content_type
picture.put()
flash(u'File uploaded', 'correct')
return redirect(url_for("edit_picture", id=picture.key()))
else:
return render_template('admin/pictures/new.html', title=u'Upload a picture', message=u'No picture selected')
To render a thumbnail you can use next code:
#frontend.route('/thumbnail/<id>/<width>x<height>.<ext>')
def thumbnail(id, width, height, ext):
key = db.Key(id)
picture = Picture.get(key)
img = images.Image(picture.data)
if width != '0':
w = int(width)
else:
w = img.width
if height != '0':
h = int(height)
else:
h = img.height
if img.height > h and h != 0:
w = (int(width) * img.width) / img.height;
if img.width > w:
h = (int(height) * img.height) / img.width;
thumb = images.resize(picture.data, width=w, height=h)
response = make_response(thumb)
response.headers['Content-Type'] = picture.content_type
return response