Google App Engine: Uploading and Transforming User Profile Photo via Blobstore

Question

I'm trying to allow each user to upload one profile photo, and transform them to be 100x100 px.

I've created a ProfilePhoto model:

class ProfilePhoto(ndb.Model):
    user_key = ndb.KeyProperty()
    blob_key = ndb.BlobKeyProperty()
    serving_url = ndb.StringProperty()
    created = ndb.DateTimeProperty(auto_now_add = True)

The UploadHandler:

class ProfilePhotoForm(BaseHandler):

    def get(self, user_id):
        user_id = int(user_id)
        if is_author:
            author_key = ndb.Key('Account', user_id)
            profile_photo = ProfilePhoto.query(ProfilePhoto.user_key == author_key).fetch()
            if profile_photo:
                photo_blob_key = profile_photo[0].blob_key
            else:
                photo_blob_key = None

            upload_url = blobstore.create_upload_url('/%s/upload' % user_id)

            user = User.get_by_id(int(user_id))
            self.render(
                'profile-photo-form.html', 
                user = user,
                upload_url = upload_url,
                photo_blob_key = photo_blob_key,
                profile_photo = profile_photo)
        else:
            self.write('You are not author.')

    def post(self, user_id):
        user_id = int(user_id)
        user = User.get_by_id(user_id)
        user.profile_photo = self.request.POST.get('profile_photo').file.read()
        user.put()
        self.redirect('/u/%s' % user_id)

Then the UploadHandler and ServeHandler looks like this:

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):

    def post(self, user_id):
        user_key = ndb.Key('User', user_id)
        photo = self.get_uploads('profile_photo')
        if photo:
            existing_photos = ProfilePhoto.query(ProfilePhoto.user_key == user_key).fetch()
            if existing_photos:
                # Deleting previous user photos if they exist
                for e in existing_photos:
                    blobstore.delete(e.blob_key)
                    e.key.delete()

            photo_info = photo[0]

            serving_url = images.get_serving_url(photo_info.key())

            profile_photo = ProfilePhoto(
                user_key = ndb.Key('User', user_id), 
                blob_key = photo_info.key(),
                serving_url = serving_url)

            profile_photo.put()

            #self.redirect('/profile-photo/%s' % photo_info.key())
            self.redirect('/u/%s' % user_id)
        else:
            self.redirect('/u/%s' % user_id)


class ServeHandler(blobstore_handlers.BlobstoreDownloadHandler):

    def get(self, blob_key):
        blob_key = str(urllib.unquote(blob_key))
        blob_info = blobstore.BlobInfo.get(blob_key)
        self.send_blob(blob_info)

And finally, the form looks like this:

<form action="{{upload_url}}" method="post" enctype="multipart/form-data">


            <label>Profile Photo<br> <input type="file" name="profile_photo"></label>

            {% if profile_photo %}
                <h4 class="sub-title">Current Photo</h4>
                <img src="/profile-photo/{{photo_blob_key}}" />
            {% endif %}

    <input type="Submit" value="Save">
</form>

Images are currently outputted in my template like this:

<img src="/profile-photo/{{photo_blob_key}}" />

So now I've gathered that the best way to transform images and output them on my template is to use the get_serving_url() method, but at this point I'm quite confused about how to use it.

Answer 1

In your template put

<img src="{{ profile_photo.serving_url }}=s100">