Upload Javascript file to Google Cloud Endpoint

Question

I am building a web application using only HTML5 + Javascript + jQueryMobile , and I wanted to upload the file to the Google App Engine using the Google Cloud Endpoint , also created by me.

Since I manage both sides, I can (and want to) create the simplest interaction.

As for the endpoint, I thought about creating such a method:

@ApiMethod( name = "uploadFile", path = "upload_file", httpMethod = HttpMethod.POST ) public void uploadFile(File file) { //process the file } 

This File class may contain a fileData field of type Blob or byte [] or something like that, relaying the file data ... Something like:

 public class File { private String fileName; private long fileSize; private Blob fileData; //getters and setters } 

So, the first question: what is the most suitable type for this fileData field ?

And, taking into account the type selected for the field, how can I create the necessary POST request for this form of Javascript / jQuery endpoint method?

Basically I need to create a POST request for http://myappid.appspot.com/_ah/api/files/v1/upload_file add a File object to the POST data.

Note. Sorry, I have not tried anything for Javascript code, because I am not familiar with these technologies, so I would appreciate any help ...

Answer 1

I ended up using this code in my Javascript application for AMD. Sorry, I can’t explain it too much, because I wrote a lot of code, since I wrote this project, and as you can see, I did not comment the code correctly ( fail !! ), in any case, maybe you can get some ideas ...

Please note that there is something about getting a navigation position, because I wanted to save the place where the file was downloaded, but this is not necessary!

Controller.js

  uploadFile: function(request, render) { var self = this; var file = $("#file").get(0).files[0]; var reader = new FileReader(); reader.onload = function (evt) { var upload = { provider: self.folder.provider, folderIdentifier: self.folder.id, fileName: file.name, fileSize: file.size, base64Data: btoa(evt.target.result), location: { latitude: self.position.coords.latitude, longitude: self.position.coords.longitude } } var uploadFilePromise = self.connector.uploadFile(self.sessionToken.token, upload); uploadFilePromise.done(function (file) { render("file", { result: "DONE", file: file }); }); uploadFilePromise.fail(function (error) { render("file", { result: "FAIL" }); }); } navigator.geolocation.getCurrentPosition(function(position) { self.position = position; reader.readAsBinaryString(file); }); } 

Connector.js

  uploadFile: function (sessionToken, upload) { var self = this; var promise = new Promise(); gapi.client.load('upload', 'v1', function() { var request = gapi.client.upload.uploadFile({ session_token: sessionToken, resource: upload }); request.execute(function(response) { if (response.error) { promise.reject(response.error); } else { var file = File.create(response.result.provider, response.result.type, response.result.identifier, response.result.name, response.result.description, response.result.created, response.result.size, response.result.link, { latitude: response.result.location.latitude, longitude: response.result.location.longitude }); promise.resolve(file); } }); }, self.api); return promise; } 

Endpoint.java

 @Api(name="upload") public class UploadEndpoint { @ApiMethod( name = "uploadFile", path = "upload_file", httpMethod = HttpMethod.POST ) public File uploadFile ( @Named("session_token") String token, Upload upload) throws InternalServerErrorException { File file = new UploadController().uploadFile(token, upload); return file; } } 

Answer 2

Edit: the answer below points to the python version of AppEngine

This is a common requirement without a clear solution. So far, gae-init-upload is a demonstration of how you can achieve this with AppEngine and CoffeeScript. Worth seeing, CoffeeScript compiles to JavaScript if you are not familiar.

The JavaScript solution you are looking for is under

/main/static/src/coffee/common/upload.coffee