Home/ Questions/Q 8774869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T18:40:28+00:00

The instructions from Google about dynamically serving images with GAE are here: https://developers.google.com/appengine/articles/python/serving_dynamic_images The

  • 0

The instructions from Google about dynamically serving images with GAE are here: https://developers.google.com/appengine/articles/python/serving_dynamic_images
The only problem is that this method does not use AJAX, and I don’t think it is as efficient as I would expect.

I am trying to use AJAX with GAE Python 2.7 to serve multiple images dynamically, but I am focusing on serving one right now.

Python Server Side Code:

class GetImage(webapp2.RequestHandler):
    def get(self):
        problem = Problem.all()[0]
        if(problem and problem.prompt_image):
            self.response.headers['Content-Type'] = "image/png"
            self.response.out.write(problem.prompt_image)

Client Side AJAX Code:

$.ajax({
    url: "/img",
    type: "POST",
    dataType: "html",
    success: function(msg){
        $("#right").append("<img>"+msg+"</img>");
    }
});

The problem that I am facing is that I don’t know how to serve the blobstore contents via AJAX to the DOM. Can anyone point me in the right direction?

Thanks!

Edit: voscausa’s solution seems to be on the right track. However, it requires a blob_key. My model is as follows:

class Problem(db.Model):
    prompt_image = db.BlobProperty()

I can’t seem to figure out how to get the Blob Key from the db.BlobProperty. Is this possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This problem gave me a real headache. Thanks to everyone, especially voscausa who put me on the right path to getting the solution. There is a lot of old material out there, this is the solution I used:
    https://developers.google.com/appengine/docs/python/blobstore/overview#Uploading_a_Blob
    (see complete sample application)

    import os
import urllib
import webapp2

from google.appengine.ext import blobstore
from google.appengine.ext.webapp import blobstore_handlers

class MainHandler(webapp2.RequestHandler):
  def get(self):
    upload_url = blobstore.create_upload_url('/upload')
    self.response.out.write('<html><body>')
    self.response.out.write('<form action="%s" method="POST" enctype="multipart/form-data">' % upload_url)
    self.response.out.write("""Upload File: <input type="file" name="file"><br> <input type="submit"
        name="submit" value="Submit"> </form></body></html>""")

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
  def post(self):
    upload_files = self.get_uploads('file')  # 'file' is file upload field in the form
    blob_info = upload_files[0]
    self.redirect('/serve/%s' % blob_info.key())

class ServeHandler(blobstore_handlers.BlobstoreDownloadHandler):
  def get(self, resource):
    resource = str(urllib.unquote(resource))
    blob_info = blobstore.BlobInfo.get(resource)
    self.send_blob(blob_info)

app = webapp2.WSGIApplication([('/', MainHandler),
                               ('/upload', UploadHandler),
                               ('/serve/([^/]+)?', ServeHandler)],
                              debug=True)
    • 0