Question

I have a javascript frontend connect to a Google App Engine backend. The instructions for uploading a file to Blobstore assume you are using JSPs, which I am not. The example for creating a file drop handler assume you just want to send the file up by itself in a post.

This works for sending the file up:

var files = event.getBrowserEvent().dataTransfer.files;
if (files.length > 0) {
  if (files.length > 1) {
    console.log('Too many files!');
  } else {
    var file = files[0];

    var xhr = new goog.net.XmlHttp();
    xhr.open('POST', '/imageUpload?gwt.codesvr=localhost:9997');
    xhr.send(file);
  }
}

But this is just sending the data directly to my servlet. I could add a form to my html but as far as I can tell closure doesn’t like setting inputs of type file.

Suggestions as to how I can upload my files to the Blobstore?

Answer 1

With some help from this answer, I finally figured this out.

First off, make sure sessions are enabled in your appengine-web.xml: <sessions-enabled>true</sessions-enabled>

I ended up writing two separate servlets, one that creates the upload URL and the second that handles the redirect after the image is written to the blobstore.

Image upload URL servlet

public void doGet(HttpServletRequest pRequest, HttpServletResponse pResponse) throws IOException {
    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
    Map<String, String> payload = new HashMap<String, String>();

    payload.put("url", blobstoreService.createUploadUrl("/imageUpload"));

    LOGGER.info("Payload: " + GSON.toJson(payload));

    pResponse.setContentType("application/json");
    pResponse.getWriter().println(GSON.toJson(payload));
}

Client side image upload requestor

// request function
...
goog.net.XhrIo.send('/imageUploadURL', goog.bind(this.handleURLReceived, this));
...

// response handler function
myapp.ImageDrop.prototype.handleURLReceived = function(event)
{
  this.postURL = this.extractValidJson(event).url;
  myapp.logger.fine('Response: ' + this.postURL);
};

extractValidJson(event) is just a utility function I wrote to pull out the json response.

Once we have a valid URL, we can allow uploads.

Client side upload drop sender

// In constructor
...
var dropZone = goog.dom.getElement('image-drop');
var handler = new goog.events.FileDropHandler(dropZone, true);
goog.events.listen(handler, goog.events.FileDropHandler.EventType.DROP, goog.bind(this.handleDrop, this));
...

// FileDropHandler
myapp.ImageDrop.prototype.handleDrop = function(event)
{
  var files = event.getBrowserEvent().dataTransfer.files;

  var file = files[0]; // IRL, do error checking

  this.xhr = new goog.net.XmlHttp();
  this.xhr.open('POST', this.postURL, true); // asych
  this.xhr.onreadystatechange = goog.bind(this.uploadResponseHandler, this);

  var form_data = new FormData();
  form_data.append('file', file); // name is arbitrary, must match in servlet      
  this.xhr.send(form_data);
};

Image upload redirect servlet

public void doPost(HttpServletRequest pRequest, HttpServletResponse pResponse) throws IOException {
    Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(pRequest);

    // 'file' matches param name from form
    for (BlobKey key : blobs.get("file")) {
        LOGGER.info("We have a KEY!!!! " + key);
        blobstoreService.delete(key); // Just testing
    }

    // Make this a real response        
    pResponse.setContentType("text/html");
    pResponse.getWriter().println("OK");

}

Then you can do whatever in your uploadResponseHandler. Request finished is 4 (see this).

myapp.ImageDrop.prototype.uploadResponseHandler = function(event)
{ 
  if (this.xhr.readyState === myapp.ImageDrop.REQUEST_FINISHED) {
    myapp.logger.fine('Request finished!');
  }
};

Not so bad once all the pieces come together.