Skip to main content

Uploading and Retrieving images on Google Cloud Storage

You would already be aware that there are multiple options given by Google Cloud Platform to store data. Here is Google documentation on when to use which option:
Google recommends using Google Cloud Storage (GCS) to store static content like files/videos etc. There is something called 'Blobstore' as well which is also used to store such content but it is on the way to being deprecated. This page talks about using GCS to store images.
Look at this page to understand basic requirements for setup of GCS. In the Cloud Store Browser below following buckets are already available. If you select any bucket, you would be able to see the objects created in it. 
Here you can see the image file in the 'jda-pd-slo-sandbox.appspot.com' bucket. You won't be able to add/delete files or folder from the browser if you don't have proper access but through code (running with the service account) it should not be a problem.
Objects on GCS are immutable so you can't edit an object after it has been created. You can overwrite it.

Helpful Links

Code

Following code accepts an image file, resizes it and uploads it on cloud storage bucket and returns URL. To test this code: Using Postman send a POST request to https://peaceful-guide-133423.appspot.com/uploadData/{imageName}, Have the body set to Binary, attach an image and send. You should see URL for resized image.
This won't work unless deployed on cloud because when running locally the code can't access any bucket on GCS and you will probably get all sorts of errors and exceptions!
//This code uploads an image on the GCS in a bucket named 'bucket_name' and assigns the image name 'image.png'. 
//If you run it multiple times, it will overwrite the image. 
//In second part it takes the images, applies a transform on it using ImagesService and saves it back on 
//GCS and returns a URL to access the image.
@RequestMapping(
        value = "/uploadData/{imageName}",
        method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE)
public String uploadImage (@PathVariable (value="imageName") String imageName, HttpServletRequest request) {  
 GcsService gcsService = GcsServiceFactory.createGcsService(new RetryParams.Builder()
        .initialRetryDelayMillis(10)
        .retryMaxAttempts(10)
        .totalRetryPeriodMillis(15000)
        .build());
  String bucketName = "bucket_name";
  String userFileName = imageName + ".png";
  GcsFilename fileName;
  GcsFileOptions options = new GcsFileOptions.Builder().cacheControl("no-cache").build();
  try {
    //Get the GcsFileName using bucket name and desired file name
 fileName = createGcsFileName(bucketName, userFileName);

    //Save the image on GCS 
 GcsOutputChannel outputChannel = gcsService.createOrReplace(fileName, options);

    //Actually write the image to GCS bucket
 copy(request.getInputStream(), Channels.newOutputStream(outputChannel));
  } catch (Exception e) {
    System.out.println(e.getMessage());
  }

  //To transform the image, get the image from GCS.
 Image originalImage = getImageFromGCS(bucketName, userFileName);
  ImagesService imagesService = ImagesServiceFactory.getImagesService();

  //Transform image.
 Image modifiedImage = transformImage(imagesService, originalImage);

  fileName = createGcsFileName(bucketName, userFileName);
  //Save the transformed image on GCS. 
 try {
    gcsService.createOrReplace(fileName, options, ByteBuffer.wrap(modifiedImage.getImageData()));
  } catch (IOException e) {
    e.printStackTrace();
  }

  //Get a URL to access the image saved on GCS.
 String url = imagesService.getServingUrl(ServingUrlOptions
          .Builder.withGoogleStorageFileName("/gs/" + bucketName + "/" + userFileName)
          .secureUrl(true));

  //DO whatever you want with the URL! 
 request.getSession().setAttribute("URL", url);
  return "imageUpload";
}

/*
 This method creates a GcsFileName using bucketName and fileName. File name is the name of the file you
 want on GCS. It is not the actual file name necessarily. 
*/
private GcsFilename createGcsFileName(String bucketName, String userFileName) {
  return new GcsFilename(bucketName, userFileName);
}

/*
 This method fetches an image from GCS using BlobstoreService. To create 'BlobKey' the name of the file 
 is in format: /gs/<bucketName>/<fileName>. If while saving the file you gave a path like
 <bucketName>/some/directory/fileName then in the browser you will see that fileName is created inside
 some/directory but still to access the image you will have to give whole path, not just name.
*/
private Image getImageFromGCS(String bucketName, String userFileName) {
  BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
  BlobKey blobKey = blobstoreService.createGsBlobKey("/gs/" + bucketName + "/" + userFileName);
  return ImagesServiceFactory.makeImageFromBlob(blobKey);
}

/*
 This method applies transformation on an image and returns the modified image. Here it is just resizing. 
*/
private Image transformImage(ImagesService imagesService, Image originalImage) {
  Transform transform = ImagesServiceFactory.makeResize(225, 250, true);
  return imagesService.applyTransform(transform, originalImage);
}

private void copy(InputStream input, OutputStream output) throws IOException {
  try {
    byte[] buffer = new byte[BUFFER_SIZE];
    int bytesRead = input.read(buffer);
    while (bytesRead != -1) {
      output.write(buffer, 0, bytesRead);
      bytesRead = input.read(buffer);
    }
  } finally {
    input.close();
    output.close();
  }
}
Known Issue
If you run above code multiple times you will notice that even if you send different images, though the image gets overwritten the URL you get is still the one you got the first time. This is due to caching in intermediate proxy servers and currently I don't know how to resolve it. Workarounds are to using MD5 hash of the file as the name or storing different images with different names.
 

Comments

Popular posts from this blog

File upload problem: UTF-8 encoding not honored when form has multipart/form-data

The problem that I was facing was something like this. I was using Apache Commons File Upload library to upload and download some file.

I had a form in which user can upload a file and another field 'name' in which she can give any name to the file being loaded.


When I submitted the form, the file was uploaded fine but the value in name field was garbled. I followed all the possible suggestions I found:

<%@page pageEncoding="UTF-8"%> set. <%@page contentType="text/html;charset=UTF-8"%gt; set after the first directive. <meta equiv="Content-Type" content="text/html;charset=UTF-8"> in the head. enctype="multipart/form-data" attribute in the form. accept-charset="UTF-8" attribute in the form.
in the Servlet:
before doing any operations on request object: request.setCharacterEncoding("UTF-8"); For accessing the value

FileItem item = (FileItem) iter.next();

if (item.isFormField()) {

//For regular…

java.lang.IllegalArgumentException: Malformed \uxxxx encoding

I was getting this exception during build while running ant. Googling didn't help much and I was flummoxed because the same code was running fine till now.

My code reads a text file and does some operations on the basis of values read. It was only when I saw the text files I understood the error. I had copied the text in wordpad and saved it as .txt file. Wordpad had put lot of formatting information before and after the content. Also there was "\par" after every line, which was giving this error.

So moral of the story: if you get this exception check your properties file (or any other file that your code might be reading.)

Easiest way to print Timestamp in Java

Rather than using Calendar.getTime() we can use java.sql.Timestamp class to get the time stamp which gives date and time till millisecond precision.

System.out.println(new Timestamp(System.currentTimeMillis()));

Above will give you current timestamp in this format: 2010-07-27 16:37:45.39