Ahora les comparto un pequeño ejemplo de como poder subir imágenes a nuestro proyecto en la nube de Google.  Esto se realiza a través de la API Blobstore que nos permite guardar objetos mucho más grandes que los permitidos por el Datastore de la aplicación. A estos objetos se les llama blobs. El ejemplo que muestro a continucación consiste en subir la fachada de una casa, donde a través de un formulario subiremos dicha imagen y a través de Blobstore guardaremos la imagen y referencia para despues acceder a dicha imagen.

Primeramente agregamos en el modelo del objeto casa cuya clase llamaremos House dos variables miembro, una de tipo Blob y una de tipo String.  (Importar la clase Blob, import com.google.appengine.api.datastore.Blob;)

  1. @Persistent
  2. private Blob outsideImageHouse;
  3.  
  4. @Persistent
  5. private String keyOutsideImageHouse;

En la variable outsideImageHouse se almacenará en si el blob de la imagen y en keyOutsideImageHouse se guardará una clave, como una especie de ID para acceder a el blob enlazado a ella. Ahora crearemos en el modelo dos funciones, una que setee un valor a la variable keyOutsideImageHouse y una función que nos regrese el valor de keyOutsideImageHouse. Teniendo esto, terminamos con el código nuestra clase modelo. Ahora modificaremos nuestra vista (.jsp), donde se encuentra el formulario para dar de alta/cambio objetos tipo House.

Ahi debemos de agregar un input tipo file desde donde se adjuntará la imagen de la casa:

  1. <input type="file" name="outsideImageHouse " id="outsideImageHouse " >

Otro dato importante es el action del form, ya que para que funcione correctamente con el Blobstore hay que modificarlo para que quede de la siguiente manera:

  1. <form action="<%= blobstoreService.createUploadUrl("/house/action/add")%>" method="post" enctype="multipart/form-data">

/house/action/add es solo la forma mapeada de acceder al controlador encargado de recibir estos datos (Servlet).

Además debemos importar en la vista las siguientes clases y crear el siguiente objeto para usarlo en el action del form:

  1. <%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
  2. <%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
  3.  
  4. <%
  5. BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
  6. %>

En nuestra clase controladora(.java) importamos las siguientes clases:

  1. import com.google.appengine.api.blobstore.BlobKey;
  2. import com.google.appengine.api.blobstore.BlobstoreService;
  3. import com.google.appengine.api.blobstore.BlobstoreServiceFactory;

  1. //Codigo relacionado con la creacion del objeto tipo house con todos sus atributos
  2. .
  3. .
  4. .
  5.  
  6. //Ahora si este es el código que nos interesa
  7. //house es el objeto creado para guardar un registro
  8. //pm es la variable PersistenceManagerFactory para guardar en jdo
  9.  
  10. Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);
  11. BlobKey blobKeyOutside = null;
  12.  
  13. blobKeyOutside = blobs.get("outsideImageHouse");
  14. if (blobKeyOutside != null){
  15.   house.setKeyOutsideImage(blobKeyOutside.getKeyString());
  16.  
  17. }
  18.  
  19. try {
  20.   pm.makePersistent(house);
  21.  
  22. } finally {
  23.   pm.close();
  24. }

Con este código estamos diciendo que se obtendrán del request(req) los elementos que puedan ser blobs, entonces a través de .get()  se obtiene el blob del file cuyo id es outsideImageHouse, si contiene algo se procede a obtener su clave y a guardarse en la variable de nuestro modelo que contendrá dicho ID. Por último el objeto house se guarda y se almacena en el datastore.

Para obtener la imagen de algun registro en particular solo debemos consultar el modelo House e iterarlo, entonces por cada elemento obtener su key del blobstore y así mostrar la imagen correspondiente, por ejemplo:

  1. <% for(House house : houses){%>
  2.   <tr>
  3.      <td><% if (house.getKeyOutsideImage()!= null){%>
  4.             <a href="/serve?blob-key=<%=house.getKeyOutsideImage() %>"></a>
  5.          <%}else{%>
  6.             No tiene imagen
  7.          <%}%>
  8.      </td>
  9.   </tr>
  10. <%}%>