Streamlining Media with TypeScript: Resize & Upload to Google Cloud

In the modern web development landscape, managing media efficiently is crucial for performance and cost-effectiveness. A common task in many applications involves processing images, such as resizing them before storage. This article guides you through creating a TypeScript function to resize an image and then upload the optimized version to Google Cloud Storage, ensuring your application remains swift and your storage costs low.

Prerequisites

Ensure you have Node.js and npm installed. You'll also need a Google Cloud account and a project set up with Cloud Storage enabled. Install the necessary npm packages:

npm install @google-cloud/storage sharp typescript ts-node @types/node

• @google-cloud/storage: The Google Cloud Storage client library for Node.js.
• sharp: A high-performance Node.js library to resize images.
• typescript & ts-node: For TypeScript execution.
• @types/node: Type definitions for Node.js.

Setting Up Google Cloud Storage

1. In the Google Cloud Console, create a new bucket in Cloud Storage where the images will be stored.
2. Obtain your service account credentials JSON file from the IAM & Admin section and set it up in your environment variables or directly in your code (not recommended for production).

The TypeScript Function

Create a file, say resizeAndUpload.ts, and add the following TypeScript code:

import { Storage } from '@google-cloud/storage'; import sharp from 'sharp'; import fs from 'fs'; import path from 'path'; const storage = new Storage({ keyFilename: 'path/to/your/service-account-credentials.json' }); const bucketName = 'your-bucket-name'; async function resizeAndUpload(filePath: string) { const resizedImagePath = path.join(__dirname, 'resized-image.png'); // Resize the image to 200x200 pixels using sharp await sharp(filePath) .resize(200, 200) .toFile(resizedImagePath); // Upload the resized image to Google Cloud Storage await storage.bucket(bucketName).upload(resizedImagePath, { destination: 'path/in/bucket/resized-image.png' }); console.log('Image resized and uploaded successfully'); // Clean up the resized image from the file system fs.unlinkSync(resizedImagePath); } // Example usage resizeAndUpload('path/to/your/image.png');

Replace 'path/to/your/service-account-credentials.json', 'your-bucket-name', and 'path/in/bucket/resized-image.png' with your actual service account credentials path, bucket name, and desired destination path in the bucket, respectively.

How It Works

1. Initialization: The function initializes Google Cloud Storage with your service account credentials and specifies the bucket name where images will be stored.
2. Image Resizing: Using sharp, the function takes an input image file, resizes it to a predefined dimension (200x200 pixels in this example), and saves the temporary resized image locally.
3. Uploading: The resized image is then uploaded to the specified bucket in Google Cloud Storage. The destination parameter defines the path within the bucket.
4. Cleanup: After the upload, the temporary resized image file is removed from the local file system.

Conclusion

This simple yet powerful function demonstrates how to combine image processing with cloud storage operations in a TypeScript application, optimizing media handling for better performance and cost efficiency. By resizing images before uploading them to Google Cloud Storage, you can significantly reduce storage requirements and improve loading times for your users, making your application more responsive and cost-effective.