Question

The following code works perfectly. My only concern is that I wanna convert below to AJAX/alternative, so that it doesn’t need to refresh the whole page to submit this request.

If possible, to also include loading progress bar etc.

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

        Upload File: <input type="file" name="file"> <br> 
        <input type="submit" name="submit" value="Submit"> 

        <input type="hidden" name="data1" value="{{ data1 }}">
        <input type="hidden" name="data1" value="{{ data2 }}">

</form>

Answer 1

Take a look at some JS solutions for AJAX upload – specifically, Plupload can be hooked up to work with the App Engine blobstore, giving you multiupload support, AJAX upload, and options for upload widgets/progress bars/etc.

In fact, @NickJohnson has a full blog post guiding you through the steps.

The gist of it is:

1) Download and install Plupload

2) Create a handler that returns a generated upload URL. Something like this:

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

class BlobstoreURLResponder(webapp.RequestHandler):

    """ Mapped to the URL /get_upload_url """

    def get(self):
        self.response.headers['Content-Type'] = 'text/plain'
        self.request.out.write(blobstore.create_upload_url('/blobstore/passthrough'))

3) Hook up Plupload to get a blob upload URL before uploading a file

uploader.bind('UploadFile', function(up, file) {
    $.ajax({
        url: '/get_upload_url',
        async: false,
        success: function(data) {
          up.settings.url = data;
        },
    });

For more detailed instructions, take a look at that blog post. Nick has an awesome walkthrough that definitely helped me get set up with Plupload + Blobstore.