从jquery webapp将图像上传到google app引擎

Question

I am attempting to build my own social network as a project to teach myself jQuery and the Google app engine Python API.

I am currently trying to work out how I can upload an image to the app engine's data-store to server as the profile picture.

I was wondering if someone could give me a quick demonstration to show me how to do this, I've worked out I need to use the ndb.BlobProperty but beyond that i haven't a clue.

If it helps, here is the User class from my server-side:

class User(ndb.Model):
    # Because we will use username as an ID/key, no need to define it. 

    profilePicture = ndb.BlobProperty()
    surname = ndb.StringProperty(required=True)
    email = ndb.StringProperty(required=True)
    password = ndb.StringProperty(required=True)
    banned = ndb.BooleanProperty(required=True)
    rank = ndb.IntegerProperty(required=True)
    strikes = ndb.IntegerProperty(required=True)
    def toJSON(self): 
        jsondata = {
            "username" : self.key.id(),
            "forename" : self.forename,
            "surname" : self.surname,
            "email" : self.email,
            "password" : self.password,
            "banned" : self.banned,
            "rank" : self.rank
        }
        return json.encode(jsondata)

any help would be greatly appreciated :)

Answer 1

One way to do this is to upload to Blob store and then use the googles Images API to serve it. Try the link. Google has given step by step instruction on how to upload and serve it.

Below is another way on how to use it, A slight difference from the Google doc is that I'm associating just the ID and the serving url to the User.

class User(ndb.Model):
.......
profilePicture = ndb.StringProperty(repeated=True) #rather ndb.BlobProperty()
surname = ndb.StringProperty(required=True)
.....

You will have a form that will be used to signup. Below is a example

<form action="/signUp" enctype="multipart/form-data" method="post">
    <input name="name"></input>
    <label>Avatar:</label>
    <input type="file" name="img"/>
    <input type="submit" value="Create Account"></div>
  </form>

In your application file you should handle the "/signUp" request. The class will take "blobstore_handlers.BlobstoreUploadHandler" as a parameter rather "webapp2.RequestHandler"

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

class NewUser(blobstore_handlers.BlobstoreUploadHandler):
  def post(self):
    try:
      image = self.get_uploads('img')
      url = images.get_serving_url(image.key(),400)
      print ("image url %s" %url) 
      imageData = [url, image.key()]
    except:
      print ("Something went wrong")

In the above code you'll have a imageData array that will have the url as the first parameter and the key as second. you can use the url to serve images in webpages, usually in a img tag

<img src=the_generated_url>

Save this array as the "profilePicture" property. you can use the blob key (the second element in the array) to delete the image if needed.