I have been searching through wherever possible but got no help at all for this question. I am working on a small program using python GAE with backbone javascript, I want the user can create a new book with a html form given below and store the new book in the GAE datastore, the form contains strings and an image.
<form>
<div><label>Title:</label> <input type="text" id="title" name="book_title" ></div>
<div><label>Author:</label> <input type="text" id="author" name="book_author" ></div>
<div><label>Picture:</label> <input id="image" type="file" class="upload" name="img" /></div>
<div><img id="img_preview" src="#" alt="image" ></img></div>
<div><button class="create_book">Create Book</button></div>
</form>
selecting a book picture from the local file system is handled by displayPicture method in order to load a thumbnail image on the page for preview.
clicking "Create Book" button event is handled by the createBook method in javascript file:
event:{
"click .create_book": "createBook" ,
"change .upload": "displayPicture",
......
},
createBook:function(){
this.model.set({
title: $('#title').val(),
author: $('#author').val(),
image: this.pictureFile.name
});
......
app.bookList.create(this.model,{wait:true,
success:function(){
alert("A new book has been created!");
}
});
return false;
},
......
displayPicture: function(evt){
var files = evt.target.files;
if(files){
this.pictureFile = files[0];
var reader = new FileReader();
reader.onloadend = function(){
$('#img_preview').attr('src',reader.result).width(200).height(200);
};
reader.readAsDataURL(this.pictureFile);
},
..........
at the python server end:
class Book(db.Model):
title = db.StringProperty()
author = db.StringProperty()
image = db.BlobProperty()
class createBook(webapp.RequestHandler):
def post(self):
book = Book()
book.title = self.request.get("title")
book.author = self.request.get("author")
book.image = db.Blob(self.request.get("image"))
book.put()
......
application = webapp.WSGIApplication(
[
.....
('/books/?',createBook)
],
debug=Ture
)
I can only display the thumbnail picture on the page for preview, but fail to create the new book, the line "app.bookList.create(...)" does send a POST request to the python server end, and the request is handled by the "createBook" method, but Firebug shows the "self.request.get("title"/"author"/"image")" lines are just an empty string, which means the content of the form is not retrieved from the Http request properly. can you tell what are the problems in my code snippet ? thanks for your help.