serve images using Google App Engine?

Question

I am writing a simple application, that lets user upload images, and the application will show the image directly below the upload form. However I can't figure out how to show the image properly. I have tried several answers in stack overflow. None of them seem to answer the questions that I have. Could anyone please look at my code and see what I am doing wrong? Any help would be greatly appreciated.

import os
import urllib
import webapp2
from google.appengine.ext import db
import google.appengine.api.images
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>""")
    #self.response.headers['Content-Type'] = 'image/png'

    images = db.GqlQuery("select * from Images")
    serving_url = ""
    if images:
        for x in images:
            serving_url = google.appengine.api.images.get_serving_url(x.key(), 0, False, False)
            self.response.out.write("""<div>Image:<img src="%s"  </div> """ %serving_url)
    else:
        self.response.out.write("""<div>No Image Found</div>""")
    self.response.out.write("""END</body></html>""")

class Images(db.Model):
    image_db = db.BlobProperty()

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)

Daniel Roseman · Answer 1 · 2013-11-03T20:50:18.163

1

You're doing a few things wrong here.

Firstly, you are correctly using blobstore to store the images. To store reference a blobstore image in a model, you should be using db.BlobReferenceProperty.

Secondly, you're not actually storing that reference in your UploadHandler:

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]
    instance = Images(image_db=blob_info)
    instance.put()
    self.redirect('/')

Finally, your GQL returns the Images instance, not of the blob. So your call to get_serving_url should be:

serving_url = images.get_serving_url(x.image_db)

edited Nov 03 '13 at 20:50

answered Nov 03 '13 at 19:20

Daniel Roseman

588,541
66
880
895

When you save the get_serving_url once, you can use it in your HTML img tag. This way you do not need to serve the image yourself! – voscausa Nov 03 '13 at 22:15
Plus it's a good idea to actually store the `serving_url` as well in your model, instead of using the `get_serving_url()` every time.. – Lipis Nov 03 '13 at 22:55

serve images using Google App Engine?

1 Answers1