GWT form upload using BlobstoreService App Engine

I am using GWT and Google App Engine Java for my application. I have a profile screen where user enters profile information like name, age and address, saves it and gets success or failure message. I developed this initial application using GWT-RPC and it worked fine. I had a new requirement where I have to store image of the user. I am using BlobstoreService to store images. This has created complications in the flow. I had to use FormPanel as it is the only way to do a FileUpload in GWT. The BlobStore service servlet expects a redirect on completion. As a result it cannot now return any status back to my GWT application once the profile is开发者_JS百科 saved. Is there easy to store images using GWT along with other form fields and show a status message back to user once the profile is saved.

---

i struggled a lot with this problem until yesterday I figured out the solution with much help from Ikai Lan's blog. Basicaly what I did is follow his steps but with a few modifications because doing it exactly how he did it did'nt work for me:

1. Create a form panel : set encoding multipart, method post.

2. Make a GWT Remote Service that just has one method:public String getUploadURL() or something like that and in the IMPL write this:

   BlobstoreService service = BlobstoreServiceFactory.getBlobstoreService();
   return service.createUploadUrl("/XXX/YYY");
   

3. In XXX you must put your project path, for example mine is com.fer.pyn.PictureYourNews

4. In YYY you must put the servlet mapping name for a new servlet that we will have to create: I put XXX = BlobUploader, I created a BlobUploader extends HttpServlet and you have to update the web.xml.

5. Okey, so this is the weird part that I could'nt figure out, thing is that when we make a RPC call to getUploadURL() in the remote ervice from step 2 that returns a weird addres, like: '/_ah/img/eq871HJL_bYxhWQbTeYYoA' and that is the .fromAction you have to put in your form from step one. You need to update the form's action every time so i suggest the following:

   public void initBlobStoreSession()
   

   { imageService.getBlobStoreUploadURL(new AsyncCallback() {

       @Override
       public void onSuccess(String result) {
           uploadFormPanel.setAction(result);
           System.out.println("Upload Form Panel Action set");
       }
   
       @Override
       public void onFailure(Throwable caught) {
           //oops
       }
   });
   

   }

   So when you submit your fromPanel, IT WILL UPLOAD THE BLOB and you dont have to do anything, the tricky part is how to get the blob:

6. What you need to do now is create the YYY servlet we where talking about in step 4.

7. In the post method, this is important:

   private BlobstoreService blobService = BlobstoreServiceFactory.getBlobstoreService();
   Map<String, BlobKey> blobMap = blobService.getUploadedBlobs(request);
   BlobKey blobKey = blobMap.get(UPLOAD_WIDJET_NAME);
   

UPLOAD_WIDJET_NAME is the .setName for the FileUpload widjet.

1. What you are doing there is getting a key for yout BLob so you can reference it later.

2. Our next step is showing the uploaded image back to the GWT layer:

   //In the same post method from step 7
   ImagesService imagesService = ImagesServiceFactory.getImagesService();
   String imageURL = imagesService.getServingUrl(blobKey);
   response.sendRedirect("/XXX/YYY?imgURL="+imageURL);
   

3. Now in the get method:

   String imageUrl = request.getParameter("imgURL");
   response.setHeader("Content-Type", "text/html");
   response.getWriter().println(imageUrl);
   

4. We are done, now you just have to

uploadFormPanel.addSubmitCompleteHandler(new SubmitCompleteHandler() {

        @Override
        public void onSubmitComplete(SubmitCompleteEvent event) {

            uploadFormPanel.reset();
            initBlobStoreSession();
            String imageUrl = event.getResults();
            Image image = new Image();
            image.setUrl(imageUrl);
            //if you are using jetty, leave this on
                            //or else it wont work
                            //Don't use GWT.getModuleBaseURL(), it doesnt 
                            //work well in development mode
            imageUrl.replace("http://0.0.0.0:8888/", "");
            System.out.println(imageUrl);
            final PopupPanel imagePopup = new PopupPanel(true);
            imagePopup.setWidget(image);


            // Add some effects

            imagePopup.setAnimationEnabled(true); // animate opening the image

            imagePopup.setGlassEnabled(true); // darken everything under the image
            imagePopup.setAutoHideEnabled(true); // close image when the user clicks
            imagePopup.center(); // center the image


        }
    });

---

check out upload4gwt which address uploading in GWT on AppEngine.

(disclosure: I created upload4gwt; it's not mature yet, however may be useful)

---

I had the same problem. As a workaround I'm using a redirection to a servlet that print a status message for the client to parse. I'm passing the websafe string representation of the key to that result servlet.

That's a bit hackey, I'd like someone to come with a better answer, or explain why the blobstore servlet have to redirect.

---

Yeah, things get more complicated with uploads in GWT.

You can save the form data and image in separate RPCs, and either include a status message in the response to the image upload, or fire off a 3rd RPC when the form returns to get any status or metadata you need.