Serverless Image Upload for Angular and React Apps – InApps Technology 2022

Have you ever implemented image uploading in a Single Page Application, either natively using JavaScript or using frameworks such as React and Angular? For most of you, I presume the answer is yes. However, there was a time when these things were difficult to implement, especially with more user-friendly features such as drag and drop, previewing, modifying the image and other tasks before uploading them.

Over the years, modern web standards and frontend frameworks had made it easy to upload images from the client side. With advancements of cloud services, such as Amazon S3, Azure Blob Storage, and specialized JavaScript image upload services such as Cloudinary’s, uploading an image to a directory in the web server is becoming obsolete due to many reasons. These serverless services not only provide a file storage but also handles the scalability, reliability and other challenges when implementing a robust image storage backend.

This article presents commonly used techniques when uploading images from single page application to these different types of serverless services.

Uploading Images Through Backend Server

If you have been using a web server to store the uploaded image, you should have experienced in writing a backend logic to receive the updated image and store it on the server’s file system. Similarly, you can write your server code to communicate with the serverless image upload service to store the image once it is received by the backend.

For example, you can implement a backend where, once an image is received, it can upload the image to services like Amazon S3.

However there few drawbacks of this approach. This will add an additional resource usage to receive and forward the image. It affects the cost and the properties of the image like size could impact the upload performance at scale. On the other hand, one of the key benefits of using this approach is getting a uniform Backend API to upload images as well as for other functionalities.

Directly Uploading Image from Browser

This approach is commonly used to upload images from browser to Serverless Image Upload services. Since there is no intermediary, this is cost effective as well as performs faster compared to the previous approach.

However, to upload private content directly from a single page application, it will require to first get a unique user identifier (e.g; Signed Token, Cookie) from the image upload serverless service or from a backend, so that the upload functionality is allowed only for authenticated and authorized personnel.

Creating Thumbnails using Triggers

When uploading an image, it is also possible to instruct the serverless service to generate the thumbnails. Although certain serverless services do this automatically, for others it will require a custom implementation of the thumbnail creation.

To reduce the overhead in synchronously creating thumbnails at scale, one solution is to use image upload triggers. With this approach, once an image is uploaded, it will trigger a code asynchronously to create a thumbnail of the image. If you use a naming convention linking both the original file and the thumbnail, it will be easier to show the thumbnail, deriving from the image name. This will be useful to reduce the complexity of showing the relevant thumbnail image without querying a database for it.

Handling Image Thumbnailing Delays

When uploading images to the backend, sometimes it takes few seconds extra to generate the thumbnail image. If you need to show a thumbnail image as soon you upload an image in a web page component, it is possible to show the large image loaded to the browser, scaled using CSS inside the single page application. You can then implement a separate flow for the user component initiation to load the thumbnail image from the serverless service next time.

Client Side Image Pre-Processing

This is also a possibility for single page applications, where the images are processed before sending them to the backend serverless service. It will help to compress image, scale, take thumbnails and etc. where it will reduce the overhead for the backend service in processing the images at scale. However, some of the serverless services do this already in the backend, this step is not required.

Feature image via Pixabay.